Next.js의 CORS 문제 해결

Next.js CORS 문제 해결

Next.js 공식문서에서 CORS 문제 해결 방법을 살펴보면 다음과 같습니다.

next.config.js설정파일에서 rewrites메소드를 사용하라고 예시가 있습니다.

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: `API주소/:path*`,
      },
    ];
  },
};

module.exports = nextConfig;

실무에서 썼던 코드 공유

그럼 위에 예시 코드를 참고로 해서 바로 실무에서 썼던 코드 공유해 드립니다. 참고로

proxy 방식으로 문제를 해결 할 것입니다.

//next.config.js
async rewrites() { //CORS 문제 해결을 위한 설정(proxy 설정)
  return [
    {
      source: '/:path*',
      destination: `https://atlassian.net/:path*`, //컨플루언스의 API주소
    },
  ];
},
// ... 코드 생략

axios를 사용해서 데이터 fectch해오는 곳입니다.

// api/request.ts
import axios, { AxiosResponse } from "axios";

export const serverApi = axios.create({
	baseURL: '/' //next.config.js에서 설정한 (proxy 주소로 baseURL 경로 설정함)
});

serverApi.interceptors.request.use((config) => {
  config.headers['Content-type'] = 'application/json; charset=UTF-8';
  config.headers['Accept'] = 'application/json';
  return config;
}, (err) => {
	return Promise.reject(err);
});

export const apis = {
  getContentsDatas: (params: string) => serverApi.get(`/wiki/rest/api/content/${params}?expand=body.view`),
};

정리

Next.js 공식 사이트에 있는 CORS 예시를 보고 응용해서 적용까지 해봤습니다.
CORS문제에 대해서는 프론트 개발자 입장에서 오픈 API 데이터를 불러와야 하는 상황일때 맞다는 문제 입니다.
CORS문제 자체에 대해서는 검색하면 많이 나옵니다. 그것들 참고 하시고, 이번 글은 문제 해결에 대해서만 포커스해서 글을 작성했습니다.
해당 글을 보시고 많이 도움이 되었으면 좋겠습니다.😃✨👏