왜 에러가 나는가?
브라우저는 다른 출처 API 호출을 기본 차단합니다. 서버 응답 헤더에 허용 정보가 없으면 CORS 에러가 발생합니다.
FastAPI 설정 예시
app/main.py
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:5173"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)Express/Nest 설정 예시
main.ts
app.enableCors({
origin: ['http://localhost:5173'],
credentials: true,
});초심자 실수 TOP 3
allow_origins: ['*']와credentials: true를 동시에 사용- 개발/배포 URL을 헷갈려 잘못된 origin만 허용
- 프리플라이트 OPTIONS 응답을 서버가 막아버림
60분 챌린지 연결 지점
- 연결 단계: 프론트-백엔드 연동 시 첫 이슈
- CORS 트러블슈팅: 에러 유형별 대응
디버깅 체크리스트
- 브라우저 콘솔이 아니라 Network의 Response Headers 확인
- 요청 Origin과 서버 허용 Origin이 정확히 같은지 확인
- 쿠키 인증이면
credentials양쪽 설정 동시 확인