NextJS cors 설정

Category
스터디노트 NextJS
Status
Published
Tags
NextJS
cors
Description
Published
Slug
next.config.js는 Next.js 애플리케이션의 설정을 구성하는 파일
이 파일에 다양한 설정을 추가하여 Next.js의 동작 방식을 조정할 수 있음
 
→ API 경로에 대한 CORS (Cross-Origin Resource Sharing) 헤더를 설정
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        // matching all API routes
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,DELETE,PATCH,POST,PUT",
          },
          {
            key: "Access-Control-Allow-Headers",
            value:
              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;
 
  1. 타입 정의
      2. /** @type {import('next').NextConfig} */
      • TypeScript에서 사용되는 JSDoc 주석으로, nextConfig 객체의 타입 정의.
       
  1. nextConfig 객체
      2. const nextConfig = { ... }
      • Next.js의 설정을 담고 있는 객체. 다양한 설정 옵션을 포함
       
  1. headers 메서드
      2. async headers() {
  return [ ... ];
}
      • 이 메서드는 API 요청에 대한 HTTP 헤더를 설정하는 비동기 함수. API 경로에 대해 CORS 정책 정의
       
  1. CORS 설정
      2. {
  source: "/api/:path*",
  headers: [ ... ]
}
      • source: /api/:path*는 모든 API 경로에 대해 이 설정이 적용됨을 의미.
        • :path*는 모든 하위 경로를 포함함
          •  
      • headers: API 요청에 포함될 HTTP 헤더를 정의
        • Access-Control-Allow-Credentials: 클라이언트가 쿠키 및 인증 정보를 포함할 수 있도록 허용
        • Access-Control-Allow-Origin: 어떤 출처에서 요청을 허용할지를 정의.
        • *는 모든 출처를 허용함을 의미
        • (실제 애플리케이션에서는 특정 출처로 제한하는 것이 좋음)
          •  
        • Access-Control-Allow-Methods: 허용된 HTTP 메서드를 정의.
          • GET, DELETE, PATCH, POST, PUT 메서드를 허용
        • Access-Control-Allow-Headers: 클라이언트가 요청 시 사용할 수 있는 사용자 정의 헤더 정의