핵심 요약
"blocked by CORS policy" 에러는 브라우저의 보안 정책이지 프론트 코드 버그가 아니다. 해결은 서버가 응답 헤더에 Access-Control-Allow-Origin을 내려주는 것이다. 프론트에서 할 수 있는 건 개발 중 프록시 정도다.
1. 동작 원리
- 다른 출처(scheme+host+port) 요청 시 브라우저가 막는다
- GET 등 단순 요청은 바로, 그 외엔 OPTIONS 프리플라이트를 먼저 보낸다
- 서버가 허용 헤더를 안 주면 응답은 왔어도 JS가 못 읽는다
2. 서버 측 해결(Express 예)
app.use(cors({
origin: 'https://app.example.com', // * 와 credentials 동시 사용 불가
credentials: true,
methods: ['GET','POST','PUT','DELETE'],
}))3. 함정
origin: '*'와credentials: true는 함께 못 쓴다 — 정확한 출처를 명시- 프리플라이트(OPTIONS)에도 200과 허용 헤더를 줘야 한다
- 개발용 dev 프록시(next rewrites/vite proxy)는 운영엔 안 통한다 — 서버 설정 필요
자주 묻는 질문
프론트에서 헤더로 해결할 수 없나요?
없습니다. 허용 여부는 응답하는 서버가 정합니다. 서버를 못 고치면 같은 출처로 프록시하는 백엔드를 두는 방법뿐입니다.
Postman에선 되는데 브라우저에서만 막혀요.
CORS는 브라우저만 적용합니다. Postman·서버 간 호출은 영향받지 않으니, 서버에 허용 헤더를 추가해야 브라우저에서도 됩니다.
댓글 0