브라우저는 보안상 「다른 출처(origin)」의 자원에 JavaScript로 접근하는 걸 기본 차단합니다(Same-Origin Policy).
하지만 React 앱(localhost:3000)이 백엔드 API(localhost:8000)를 호출하려면 「허용」이 필요 — CORS(Cross-Origin Resource Sharing)가 그 매커니즘입니다.
출처(origin) = 「프로토콜 + 도메인 + 포트」.
https://example.com:443과 http://example.com은 다른 출처.
localhost:3000과 localhost:8000도 다른 출처.
같은 출처면 CORS 무관.
Preflight 요청.
복잡한 요청(커스텀 헤더, JSON Content-Type 등)을 보내기 전 브라우저가 OPTIONS로 「이 요청 보내도 돼?」 미리 묻습니다.
서버가 Access-Control-Allow-Origin 헤더로 허용 출처 응답.
FastAPI 예시.
from fastapi.middleware.cors import CORSMiddleware.
app.add_middleware(CORSMiddleware, allow_origins=["http://localhost:3000"], allow_methods=["*"], allow_headers=["*"]).
한 줄로 처리.
흔한 실수 — allow_origins=["*"] + allow_credentials=True는 동시 사용 불가.
쿠키·인증을 보내야 할 때는 출처를 명시적으로 적어야 합니다.
또 CORS는 「브라우저」 보안이고, 서버 간 직접 호출엔 무관.
한 줄 요약
CORS는 다른 출처 요청을 브라우저가 안전하게 허용하는 매커니즘입니다.
preflight OPTIONS, Access-Control-Allow-Origin 헤더로 동작하며, 미들웨어로 한 줄에 설정 가능.
더 알아볼 것
- Same-Origin Policy 기본
- credentials와 와일드카드 충돌
- preflight 캐시 — Access-Control-Max-Age
