[Web] CORS 문제는 무엇인가? (FastAPI에서 해결하기)

Front와 Back 모두 코드가 올바른데도 요청을 받지 못하고 다음과 같은 오류가 나오는 경우가 있습니다.

front와 back 사이에 요청을 주고 받으려면 사이트간 HTTP 요청을 허용해야합니다.
해주지 않았을 경우 아래와 같은 오류가 나타납니다.

Cross-Origin Resource Sharing (CORS)

CORS란 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 (출처 : MOZILLA)

Origin

Origin이란 Protocol, Domain, Port 묶음을 말하는 것입니다.

• http://localhost
• https://localhost
• http://localhost:8080

이 주소들은 서로 다른 프로토콜이나 포트를 사용하므로 서로 다른 출처입니다.

SOP (Same Origin Policy)

SOP란 다른 출처의 리소스를 사용하는 것에 제한 하는 보안 방식

하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 호스트나 프로토콜, 포트번호가 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하고, 동일 출처(Same Origin)에서만 접근이 가능한 정책입니다.
따라서 리소스를 다른 Origin에서 불러오고자 한다면 CORS 정책을 지켜야합니다.

해결

브라우저에서 실행 중인 프론트엔드가 있고 http://localhost:8080 해당 코드가 실행 중인 백엔드와 통신을 시도한다고 가정해 http://localhost (기본 포트 8000)를 본다고 가정합니다.
브라우저는 HTTP 요청을 백엔드로 보내고 백엔드가 다른 원본(http://localhost:8080)에서 통신을 승인하는 적절한 헤더를 보내면 브라우저는 프론트엔드가 백엔드로 요청을 보내도록 합니다.
-> 성공적으로 요청을 보내기 위해서는 백엔드에 허용된 출처 목록이 있어야 합니다.

FastAPI에서 CORS 제어

• FastAPI에서 CORSMiddleware라는 모듈을 통해 CORS를 제어할 수 있다.
  

1. CORSMiddleware를 import 해준다.

from fastapi.middleware.cors import CORSMiddleware

2. Resource 요청을 허용할 Origin을 적어준다.

origins = [
    "http://localhost:8080",
]

• 만약 모든 URL에 대해서 허용해주고 싶다면 다음과 같이 수정하면 된다.

  origins = [
      "*",
  ]

3. middleware를 등록한다.

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,  # cross-origin request에서 cookie를 포함할 것인지 (default=False)
    allow_methods=["*"],     # cross-origin request에서 허용할 method들을 나타냄. (default=['GET']
    allow_headers=["*"],     # cross-origin request에서 허용할 HTTP Header 목록
)

---

Reference

• CORS 이슈
• FastAPI-CORS(Cross-Origin 리소스 공유)¶