피드로 돌아가기
Dev.toBackend
원문 읽기
CORSMiddleware 도입을 통한 Cross-Origin 리소스 공유 문제 해결
My First CORS Error in FastAPI
AI 요약
Context
FastAPI 백엔드(Port 8000)와 HTML/JS 프론트엔드(Port 3000) 간의 분리된 환경 구성. 서로 다른 Origin으로 인한 브라우저 보안 정책 충돌 및 API 요청 차단 발생.
Technical Solution
- 브라우저의 Same-Origin Policy에 따른 리소스 접근 제한 확인
- FastAPI의 CORSMiddleware를 활용한 응답 헤더 제어 구조 설계
- allow_origins 설정을 통해 특정 Origin(http://127.0.0.1:3000)에 한정된 접근 권한 부여
- allow_methods 및 allow_headers에 와일드카드(*)를 적용하여 HTTP 메서드 및 헤더 제약 제거
- HTTP 응답에 Access-Control-Allow-Origin 헤더를 주입하여 브라우저 보안 검증 통과
실천 포인트
1. 네트워크 요청 실패 시 Browser Console의 Error Message를 최우선적으로 확인
2. API 서버의 정상 동작 여부는 Swagger UI 등 독립적 툴로 먼저 검증
3. CORS 설정 시 보안을 위해 allow_origins에 신뢰 가능한 도메인만 명시적으로 정의