육각남 찾기 프로젝트 4. CORs 문제 해결

1. CORs 문제 해결

코딩을 시작하기 앞서 CORs문제를 해결한다.

 

리액트를 사용해서 하나의 PC로 작업할 경우 CORs 문제가 생기기 때문에 미리 해결해두고 간다.

 

교차 출처 리소스 공유 - FastAPI (tiangolo.com)

교차 출처 리소스 공유 - FastAPI

관련 내용을 참고하였다.

 

FastAPI는 8000 포트를 사용하고 React. JS 쪽은 3000포트를 사용한다. 이 포트가 서로 다를 경우 포트 허용목록에 포트를 추가시켜서 데이터가 교신이 가능하도록 설정하여야 한다. 글쓴이가 이해한 수준이 이 정도에 그쳐서 더 자세한 설명을 하지 못한다.

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware


app = FastAPI()

origins = [
    "http://localhost:3000",
    "http://localhost:8000",
]

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

@app.get('/')
def main():
    return "hello world"