FastAPI에서 처음 겪은 CORS 에러
저는 직접 만들어보며 배웁니다. 지출 추적기(expense tracker)를 만들었습니다. 백엔드에는 FastAPI를 사용했습니다. 프론트엔드에는 HTML과 JavaScript를 사용했습니다.
서버는 실행되었습니다. Swagger UI도 잘 작동했습니다. 하지만 HTML 페이지는 실패했습니다. 'Load Expenses' 버튼을 눌러도 아무런 반응이 없었습니다.
Python 코드를 확인했습니다. fetch 요청도 확인했습니다. 아무것도 잘못된 게 없어 보였습니다.
브라우저 콘솔을 열었습니다. 빨간색 에러가 보였습니다. CORS가 요청을 차단하고 있었습니다.
프론트엔드는 3000번 포트를 사용했습니다. 백엔드는 8000번 포트를 사용했습니다. 브라우저는 이를 서로 다른 origin으로 인식했습니다. 그래서 연결을 차단한 것이었습니다.
FastAPI 코드에 CORSMiddleware를 추가했습니다.
http://127.0.0.1:3000 origin을 허용했습니다.
에러가 사라졌습니다.
여러분에게 주는 교훈:
- 먼저 브라우저 콘솔을 확인하세요.
- API를 별도로 테스트해 보세요.
- CORS 에러는 브라우저에서 발생합니다. 코드 버그가 아닙니다.
출처: https://dev.to/bynilotpal/my-first-cors-error-in-fastapi-2hf6