[Next.js@14] CORS - Proxy 설정

개요

• Vercel 배포 중 CORS 에러와 Next.js Proxy 우회

문제 및 해결

• 배포에 성공은 했으나 주소 접속 시 해당 에러 창 발생
• next.js 에서는 next.config.ts에서 rewrite으로 cors 우회가 가능하다
• 공식문서

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async generateStaticParams() {
    return {
      'src/app/(logged)/@modal/(.)member/:id': { page: '/member/:id' },
    }
  },
  async headers() {
    return [
      {
        source: '/usports/:path*',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: '*' },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET,OPTIONS,PATCH,DELETE,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',
          },
        ],
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/usports/:path*',
        destination: '백엔드서버주소/:path*',
      },
    ]
  },
...//중략
}

module.exports = nextConfig

• proxy 설정 확인
• 브라우저 Network 의 request url 에는 현재 localhost:3000/usports로 찍혀 있지만 실제로는 위에 기입한 destination (백엔드 서버) 으로 요청이 이루어짐