Nextjs14 에서 cors 해결방법

개요

Nextjs 에 자체 내장된 서버사이드를 이용해서 api 를 만들었는데 해당 api 를 사용시에 cors 가 발생하는 문제가 있습니다.
해결방법으로 next.config.js 와 middleware 를 이용한 방법이 있는데, 필자는 config 에 선언한게 좀 더 직관적이여서 config 에 사용했음.
하지만, 두가지 다 알려드리도록 하겠습니다.

next.config.js 를 이용한 방법

cors 를 config.js 에서 하면 객체 형식으로 관리하기 떄문에 좀 더 관리하는데 직관적인 장점이 있습니다.

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          {
            key: "Access-Control-Allow-Origin",
            value: "*",
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET, POST, PUT, DELETE, OPTIONS",
          },
          {
            key: "Access-Control-Allow-Headers",
            value: "Content-Type, Authorization",
          },
        ],
      },
    ];
  },
}

module.exports = nextConfig

middleware 를 이용한 방법

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  response.headers.set('Access-Control-Allow-Origin', '*')
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')

  return response
}

// 특정 경로에만 적용하고 싶다면
export const config = {
  matcher: '/api/:path*',
}