핵심 답변
📌 CORS(Cross-Origin Resource Sharing)는 브라우저의 동일 출처 정책(Same-Origin Policy)에 의해 다른 출처의 리소스 요청이 차단될 때, 서버가 허용 여부를 응답 헤더로 알려주는 메커니즘입니다.
출처(Origin) = 프로토콜 + 도메인 + 포트
해결 방법:
서버에서
Access-Control-Allow-Origin 헤더 설정Next.js:
next.config.ts의 headers 설정개발 시: 프록시 서버 사용
예시 코드
typescript
// next.config.ts
const nextConfig = {
async headers() {
return [{
source: '/api/:path*',
headers: [
{ key: 'Access-Control-Allow-Origin', value: 'https://example.com' },
{ key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE' },
],
}];
},
};핵심 용어
📌 동일 출처 정책(Same-Origin Policy)보안을 위해 브라우저가 다른 출처의 리소스 요청을 차단하는 정책입니다.
📌 Preflight 요청CORS 정책에서 실제 요청 전에 브라우저가 OPTIONS 메서드로 서버에 허용 여부를 확인하는 사전 요청입니다.