경위

여기 에서 소개하겠습니다만, Next.js와 FastAPI로 Next.js에서 API를 호출하면 CORS의 설정에서는 끝났으므로 기재하겠습니다.

CORS란?

Cross-Origin Resource Sharering의 약어로 일본어 번역하면 "오리진 간 자원 공유"라고합니다.
원래 오리진이 무엇이라고 하면 페이지의 스킴(프로토콜), 호스트(도메인), 포트에 의해 정의되는 것으로, 이것들이 모두 일치하는 것이 같은 오리진이라고 말할 수 있습니다.
보안상의 이유로 브라우저는 스크립트에서 시작하는 오리진 간 HTTP 요청을 제한합니다.
이것으로부터 Next.js와 FastAPI로 각각 기동하고 있는 경우는 port는 다르므로 이 제한을 받게 됩니다.

발생하는 오류

Next.js를 http://127.0.0.1:3000로 시작하고 fastAPI의 http://localhost:8000/users/create API를 호출하면 아래와 같은 오류가 발생했습니다.

오류 메시지 Access to XMLHttpRequest at 'http://localhost:8000/users/create' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

대응 방법

FastAPI 측에서 오리진 간 공유를 허용하도록 설정해야 합니다.
생성한 FastAPI의 인스턴스에 대해 아래와 같이 설정하는 것으로 대응했습니다.

from starlette.middleware.cors import CORSMiddleware
    app.add_middleware(
      CORSMiddleware,
      allow_origins=["*"],
      allow_credentials=True,
      allow_methods=["*"],
      allow_headers=["*"])

끝에

보다 좋은 대응 방법이 있을지도 모릅니다만, 일단은 상기에서 대응했습니다.
모든 것을 인정해 버릴 수 있는지 등은 앞으로 생각해 가고 싶다고 생각합니다.