Node.js네트워크
CORS policy 차단 — No Access-Control-Allow-Origin
Access to fetch at '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
한 줄 해결: 브라우저가 다른 출처(origin)로의 요청을 서버 허용 헤더가 없어 막은 것으로, 해결은 클라이언트가 아니라 서버에서 Access-Control-Allow-Origin 을 보내는 것입니다.
이런 증상일 때
프런트엔드에서 다른 도메인/포트의 API 를 fetch/axios 로 호출할 때 콘솔에 CORS policy 차단 메시지가 뜨고 응답을 못 읽습니다. 네트워크 탭에는 요청이 보이지만 자바스크립트가 접근하지 못합니다.
원인
- API 서버가 Access-Control-Allow-Origin 응답 헤더를 보내지 않음
- 프런트(localhost:3000)와 API(localhost:8000)의 출처가 달라 cross-origin
- preflight(OPTIONS) 요청에 서버가 적절히 응답하지 않음(커스텀 헤더·credentials 사용 시)
해결 방법
1
서버에서 CORS 허용 (Express)
cors 미들웨어로 허용 출처를 지정합니다. 와일드카드(*)는 credentials 와 함께 못 쓰니 명시 출처를 권장합니다.
const cors = require('cors')
app.use(cors({ origin: 'http://localhost:3000', credentials: true }))2
Next.js API/rewrites 프록시
같은 출처로 만들기 위해 next.config 의 rewrites 로 API 를 프록시하면 CORS 자체가 사라집니다.
// next.config.js
rewrites: async () => [{ source: '/api/:path*', destination: 'https://api.example.com/:path*' }]3
preflight 처리
커스텀 헤더/credentials 를 쓰면 OPTIONS 요청에 Access-Control-Allow-Methods/Headers 를 함께 응답해야 합니다.
💡 예방: CORS 는 보안 기능이라 클라이언트에서 끌 수 없습니다(브라우저 확장으로 끄는 건 개발 중에만). 반드시 서버에서 허용 출처를 통제하세요.
CORSAccess-Control-Allow-OriginfetchpreflightExpress