교차 출처 리소스 공유(CORS, Cross-Origin Resource Sharing)는 웹 애플리케이션이 서로 다른 출처(도메인, 프로토콜 또는 포트)에서 리소스를 요청할 때 발생하는 보안 메커니즘이다. CORS는 기본적으로 웹 브라우저에서 다른 출처의 리소스에 대한 접근을 제한하며, 이를 우회하기 위해 서버에서 CORS 헤더를 통해 특정 출처에서의 접근을 허용할 수 있다.
FastAPI는 이러한 CORS 설정을 간편하게 구성할 수 있는 기능을 제공하며, 이 글에서는 FastAPI에서 CORS를 설정하는 방법을 다룬다.
1. CORS가 필요한 이유
CORS는 기본적으로 보안을 강화하기 위해 존재한다. 브라우저는 자바스크립트를 사용한 요청이 다른 출처로 전송될 때 이를 제한하는데, 이는 악의적인 스크립트가 사용자의 권한으로 다른 출처에 있는 리소스에 접근하는 것을 방지하기 위함이다. 예를 들어, 특정 웹 애플리케이션에서 API를 호출할 때, 해당 API가 다른 도메인에 있을 경우 CORS 정책에 의해 접근이 차단될 수 있다.
CORS 문제는 프론트엔드 애플리케이션과 백엔드 API 서버가 다른 도메인에 있을 때 주로 발생한다. 이 문제를 해결하기 위해 서버에서 CORS를 허용하도록 설정해야 한다.
2. FastAPI에서 CORS 설정하기
FastAPI에서 CORS를 설정하는 것은 매우 간단하다. FastAPI는 이를 위해 fastapi.middleware.cors.CORSMiddleware를 제공하며, 몇 가지 간단한 설정으로 CORS 문제를 해결할 수 있다.
2.1. 기본적인 CORS 설정
아래는 기본적인 CORS 설정 예제이다. 이 설정은 특정 도메인에서만 API 요청을 허용하는 방식이다.
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
origins = [
"http://example.com",
"https://example.com",
"http://localhost:3000",
"http://localhost:8000",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/")
def read_main():
return {"message": "Hello World"}이 코드에서는 CORSMiddleware를 통해 CORS 설정을 추가했다.
allow_origins: 허용할 출처(origin)를 정의한다. 여기에 포함된 도메인만 API에 접근할 수 있다.allow_credentials: 브라우저에서 쿠키와 같은 자격 증명을 포함한 요청을 허용할지 여부를 설정한다.allow_methods: 허용할 HTTP 메서드를 지정한다.["*"]로 설정하면 모든 메서드를 허용한다.allow_headers: 허용할 HTTP 헤더를 지정한다.["*"]로 설정하면 모든 헤더를 허용한다.
2.2. 모든 출처에서 허용하기
테스트 목적이나 로컬 개발 환경에서는 모든 출처에서의 요청을 허용해야 할 때가 있다. 이를 위해 allow_origins에 ["*"]를 설정할 수 있다.
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # 모든 출처에서 허용
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)이 설정은 보안에 취약할 수 있으므로, 실제 프로덕션 환경에서는 사용하지 않는 것이 좋다. 프로덕션 환경에서는 특정 출처만 허용하도록 설정하는 것이 권장된다.
3. 고급 CORS 설정
CORS는 단순히 출처를 허용하는 것 외에도 더 복잡한 요구 사항을 지원할 수 있다. 예를 들어, 특정 헤더나 메서드만 허용하거나, 응답에 포함될 수 있는 노출된 헤더를 지정할 수 있다.
app.add_middleware(
CORSMiddleware,
allow_origins=["https://example.com"],
allow_credentials=True,
allow_methods=["GET", "POST"],
allow_headers=["Authorization"],
expose_headers=["X-Custom-Header"],
)allow_methods: GET과 POST 요청만 허용한다.allow_headers: Authorization 헤더만 허용한다.expose_headers: 클라이언트가 응답에서 접근할 수 있는 헤더를 지정한다. 이 경우,X-Custom-Header헤더를 클라이언트가 확인할 수 있다.
4. CORS 오류 해결하기
CORS 오류는 일반적으로 브라우저 콘솔에 표시된다. "CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"와 같은 메시지가 나타날 수 있다. 이 오류를 해결하려면 서버의 CORS 설정을 확인하고, 클라이언트에서 서버로 요청을 보낼 때 올바른 출처와 메서드, 헤더를 사용했는지 점검해야 한다.
