🌐
CORS 제대로 이해하기
⚠️ 중요브라우저 보안 정책 CORS의 작동 원리
CORS란?
브라우저가 다른 도메인의 리소스 접근을 제한하는 보안 정책입니다. API 서버와 프론트엔드가 다른 도메인일 때 만나게 됩니다.
❌ 나쁜 예시
// ❌ 모든 오리진 허용 (위험)
// Access-Control-Allow-Origin: *
// 인증 정보가 포함된 요청에서는 작동하지도 않음
// ❌ 에러 메시지만 보고 무작정 * 설정하기✅ 좋은 예시
// ✅ 특정 오리진만 허용
// Next.js API Route
export async function GET(request) {
const origin = request.headers.get('origin');
const allowed = ['https://mysite.com', 'http://localhost:3000'];
return Response.json(data, {
headers: {
'Access-Control-Allow-Origin':
allowed.includes(origin) ? origin : '',
'Access-Control-Allow-Credentials': 'true',
}
});
}