CORS 에러 해결 방법 정리

CORS 에러 상황별 해결:

1. 백엔드에서 헤더 설정 (근본 해결):

// Express.js
const cors = require("cors");
app.use(cors({ origin: "https://mysite.com", credentials: true }));

// Nginx
add_header Access-Control-Allow-Origin "https://mysite.com";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";

2. 개발 중 프록시:

// Next.js next.config.js
async rewrites() {
  return [{ source: "/api/:path*", destination: "http://localhost:8080/api/:path*" }];
}

// Vite vite.config.js
server: { proxy: { "/api": "http://localhost:8080" } }

3. Preflight 요청 처리:

// OPTIONS 요청에 대한 응답
app.options("*", cors());

브라우저 확장으로 CORS를 끄는 건 절대 프로덕션 해결책이 아닙니다.