CORS 오류: No 'Access-Control-Allow-Origin' 해결

증상

브라우저 콘솔에 다음과 같은 오류가 뜨고 API 응답을 받지 못합니다.

Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present.

원인

브라우저의 동일 출처 정책(Same-Origin Policy) 때문입니다. 프론트엔드 도메인과 API 도메인이 다르면, 서버가 "이 출처의 요청을 허용한다"는 응답 헤더(Access-Control-Allow-Origin)를 보내야만 브라우저가 응답을 읽게 해 줍니다. 이 헤더가 없으면 차단됩니다.

중요: CORS는 서버가 허용해야 풀리는 문제입니다. 프론트엔드 코드만으로는 근본 해결이 안 됩니다.

해결

1) 서버에 CORS 허용 헤더 추가 (근본 해결)

Express 예시:

import cors from 'cors';
app.use(cors({ origin: 'http://localhost:3000', credentials: true }));

직접 헤더를 줄 수도 있습니다.

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

2) 개발 중에는 프록시 사용

Next.js next.config.ts의 rewrites로 같은 출처처럼 요청을 우회시킵니다.

async rewrites() {
  return [{ source: '/api/:path*', destination: 'https://api.example.com/:path*' }];
}

3) 자격 증명(credentials) 요청

쿠키를 보낼 때는 서버가 Access-Control-Allow-Credentials: true를 보내야 하고, Allow-Origin에 *를 쓸 수 없습니다(구체적 출처 명시 필요).

프록시는 개발 편의용 우회일 뿐, 운영 환경에서는 서버 측 CORS 설정이 정답입니다.