[트러블 슈팅] fastapi에서 Svelte 화면 로드 안됨(feat. CORS)

1. 문제 원인

fastapi로 백엔드 서버를 만든 후 Svelte로 간단한 프론트 페이지를 만들어서 테스트해보려 했다.

페이지가 제대로 보여지지 않았다.

정확히는 fastAPI 백엔드 서버와 Svelte의 프론트 서버가 서로 통신하지 못했다.

(백엔드 서버 로그에 아무것도 뜨지 않았다.)

구글링 해본 결과 해당 문제는 CORS 정책에 의해 서로 통신이 거부되었으며, 추가적인 조치가 필요했다.

1.1 CORS란?

CORS는 Crossing-Origin Resource Sharing 의 약자로, 교차 출처 리소스 공유를 뜻한다.

여기서 뜻하는 Origin(출처) 란 URL에서 도메인 뿐만 아니라 프로토콜과 포트까지 모두 포함하는 개념이다.

즉 A 프론트 서버와 B API 백엔드 서버의 프로토콜, 포트, 도메인 중 하나라도 다르면 CORS 에러를 만나게 되는 것이다.

여기서 CORS를 설정해 준다는 것은 서로 다른 출처라도 리소스 요청, 응답을 허용해준다는 뜻이며, fastAPI 백엔드 설정에 추가해 주어야 했다.

사진출처

다른 출처를 판단하는 기준은 다음과 같다.

즉 Protocol + Host + Port 가 모두 같아야 같은 출처이다.

2. 문제 해결

백엔드 서버 최상위 파일 main.py에 이하의 코드를 추가해 해결했다.

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

이상의 코드는 다음을 뜻한다.

CORSMiddleware : CORS를 처리하는 미들웨어이다.

allow_origins=["*"] : CORS으로 요청을 허용할 도메인의 리스트이다. “*”는 모든 도메인들 뜻한다. 특정 도메인만 허용하려면 따로 적어주면 된다.

allow_credentials=True : 브라우저가 요청과 함께 자격 증명(쿠키, 인증헤더)를 포함할 수 있도록 허용한다.

allow_methods=["*"] : 모든 HTTP 메서드를 허용한다. 특정 메서드만 허락하고 싶다면 따로 적어주면 된다. ex) allow_methods = [”POST”, “GET”]

allow_headers=["*"] : 모든 헤더를 허용한다. 이 옵션 역시 특정 헤더만 적어주어서 허락할 설정해줄 수 있다.

---

서버를 처음 실행했을때 쉽게 만날 수 있는 문제일 것 같다. FastAPI, Svelte 모두 아무 에러 로그도 뜨지 않아서 어떤 문제인지 찾기 어려웠다.