Skip to content

37. CORS (Cross-Origin Resource Sharing)

1. CORS (Cross-Origin Resource Sharing)

  • CORS 또는 "Cross-Origin Resource Sharing"은 백엔드는 프론트엔드와 통신하고 있으며, 서로 다른 "origin"에 있는 상황을 나타낸다.
  • 웹 페이지 상의 제한된 자원을 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.


2. Origin

  • origin은 프로토콜(http, https), 도메인(myapp.com, localhost, localhost.tiangolo.com), 포트(80, 443, 8080) 등의 조합이다.
  • 다음과 같은 조합은 서로 다른 origins을 의미한다.


1] http://localhost

2] https://localhost

3] http://localhost:8080


  • 모두 localhost가 있지만, 서로 다른 프로토콜 또는 포트를 사용하기 때문에 다른 "origins"이다.


3. Steps

  • http://localhost:8080에서 실행 중인 프론트엔드가 있고, 그 프론트엔드의 JavaScript는 http://localhost에서 실행 중인 백엔드와 통신을 시도한다고 가정해 보자.
  • 그 후 브라우저는 HTTP OPTIONS request를 백엔드에 보내고, 만약 백엔드가 이 다른 origin(http://localhost:8080)으로부터의 통신을 승인하는 적절한 headers를 보내면 그 브라우저는 프론트엔드에 있는 JavaScript로 하여금 request를 백엔드로 보내도록 한다.
  • 이를 가능하게 하려면, 백엔드에 "allowed origins" 리스트가 있어야 한다.


4. Wildcards

  • 목록을 "*"("wildcard")로 선언하여 모두 허용됨을 나타내는 것도 가능하다.
  • 하지만 Cookies, 그리고 Bearer Tokens 등과 함께 사용되는 것과 같은 인증 headers와 같은 자격 증명과 관련된 모든 것을 제외하고 특정 유형의 통신만 허용한다.
  • 따라서 모든 것이 올바르게 작동하려면 allowed origins를 명시적으로 지정하는 것이 좋다.


5. Use CORSMiddleware

  • CORSMiddleware를 사용하여 FastAPI 애플리케이션에서 다음과 같이 구성할 수 있다.


1] CORSMiddleware를 임포트한다.

2] 문자열로 된 allowed origins의 리스트를 생성한다.

3] FastAPI 애플리케이션에 "middleware"로 추가한다.


  • 또한 백엔드가 다음과 같은 것을 허용하도록 지정할 수도 있다.


1] 인증 headers, Cookies 등과 같은 credentials

2] POST, PUT과 같은 특정 HTTP 메소드 또는 "*"

3] 특정 HTTP headers 또는 "*"


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

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

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

@app.get("/")
async def main():
    return {"message": "Hello World"}


  • CORSMiddleware 구현에서 사용하는 기본 매개변수는 기본적으로 제한적이므로 브라우저가 도메인 간 컨텍스트에서 사용할 수 있도록 하려면 특정 origins, 메서드 또는 headers를 명시적으로 활성화해야 한다.

References