Fast API 에서 CORS 에러 해결하기

웹개발을 하다보면 가장 골치아픈 것 중 하나가 CORS (Cross-Origin Resource Sharing) 에러이다. 특히 높은 수준의 보안을 요구하는 Chrome 의 경우에는 원천적으로 CORS를 허용하지 않기 때문에 정말 많은 웹 개발자들이 CORS 문제를 해결하느라 애를 먹는다. 일단 CORS 에러가 무엇인지는 추후 다른 글에서 자세히 다루기로 한다.

 

하지만 웹 어플리케이션의 Backend 를 FastAPI로 운영한다면 FastAPI의 자체적인 모듈로 다행히 쉽게 해결이 가능하다. 

바쁘신 여러분들을 위해 핵심코드만 기재한다.

 

main.py

간결하게 요점만 설명하기 위해 최소한의 코드만 작성하였다.

from fastapi import FastAPI
import uvicorn
from starlette.middleware.cors import CORSMiddleware

origins = [
    "frontend-app.yourdomain.com",
    "frontend-app2.yourdomain.com:7000"
]

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

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0")

 

Key Point

• origins 라는 배열에 여러분의 Frontend URL을 넣는다. 만약 Frontend 앱을 80이나 443 이 아닌 임의포트를 통해 서비스한다면 frontend-app2.yourdomain.com:7000 처럼 반드시 포트번호까지 넣어주어야 한다.
• 만약 IP Address 로 접근하는 Frontend 앱이라면 <ip-address>:<port> 형식으로 넣어준다. 요지는 Frontend 앱에 접근하는 URL과 정확하게 문자열이 일치해야 한다는 것이다. IP에 도메인이 할당되어 있다고 해도 반드시 접근하고자 하는 URL 문자열과 동일하게 넣어준다.
• 만약 모든 URL에 대해서 허용해주고 싶다면 아래와 같이 코드를 수정한다.
  

  origins = [
      "*"
  ]​

 

추가설명

해당 설정은 FastAPI 의 응답 헤더에 Cross-Origin 을 허용한다는 정보를 추가하여서 브라우저가 각기다른 URL로부터 받은 응답을 조합하여 웹페이지를 표현하는데 문제가 없도록 하는 것이다. 이처럼 CORS 에러가 발생할 경우 FastAPI와 같은 서버사이드에서 해결해주어야 한다. 과거에는 보안상 CORS를 허용하지 않는 API들이 많았지만, 요새는 공개 API가 많아진 만큼 CORS를 허용하는 공개 API도 많다.