CORS 오류 — 브라우저가 요청을 막을 때

문제 해결 / cors-error.html

프론트엔드에서 API를 호출했는데 'blocked by CORS policy'가 뜨는 상황의 원인과 해결 방법입니다.

💬 오류 증상: "No 'Access-Control-Allow-Origin' header is present".

브라우저는 보안을 위해, 페이지를 제공한 출처(origin)와 다른 서버로의 요청 결과를 기본적으로 차단합니다. 이것은 서버를 잘못 만든 것이 아니라 서버가 허용 헤더를 안 보낸 것이 원인입니다.

발생 원인

• 프론트(localhost:5173)와 API(localhost:8000)의 포트가 다름 = 다른 출처.
• 서버 응답에 Access-Control-Allow-Origin 헤더가 없음.

확인 명령어

curl -i http://localhost:8000/api/items | grep -i access-control

해결 방법 (FastAPI 예)

from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],
    allow_methods=["*"],
    allow_headers=["*"],
)

• 운영 환경에서는 allow_origins=["*"]보다 실제 도메인을 지정하세요.

해결 검증

• 다시 curl로 Access-Control-Allow-Origin이 보이면 성공입니다.
• 브라우저 개발자도구 Network 탭에서 응답 헤더를 확인하세요.

검증일은 자료의 최신성을 나타냅니다. 오래된 자료는 적용 조건을 확인하세요.