스프링 API 서버와 Next.js에서 axiosInstance 사용하기

처음에 Next.js의 내장 기능인 API Routes를 사용하여 서버 사이드에서 API 요청을 처리하기 위한 프록시 설정을 했다.

/** @type {import('next').NextConfig} */

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8080/api/:path*',
      },
    ];
  },
};

 

그리고 이후 react-query 도입을 위해 axios instance 설정파일을 다음과 같이 설정했다.

import axios from 'axios';

const localServer = 'http://localhost:8080'; // 로컬 서버
const productServer = ''; // 실제 백엔드 서버

const axiosInstance = axios.create({
  baseURL: localServer,
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Request Interceptor
axiosInstance.interceptors.request.use(
  (config) => {
    // console.log('Starting Request', config);
    return config;
  },
  (error) => {
    // 요청 상태 코드 200이 아닌 경우
    console.error('Request Error, 요청 에러', error);
    return Promise.reject(error);
  },
);

// Response Interceptor
axiosInstance.interceptors.response.use(
  (response) => {
    // 응답 로직
    // console.log('Response:', response);
    return response;
  },
  (error) => {
    // 응답 상태 코드 200이 아닌 경우
    console.error('Response Error, 응답 에러', error);
    return Promise.reject(error);
  },
);

export default axiosInstance;

 

그런데 요청을 보내면 계속 403 CORS 에러가 떴다. 이유를 알아보았는데...

이것은 Next.js가 프록시 서버 역할을 하도록 설정했기 때문이었다.

만약 Next.js가 프록시 서버 역할을 하도록 설정하였다면, 클라이언트 측에서 API 요청을 보낼 때는 Next.js 서버의 주소인 'http://localhost:3000'을 사용해야 한다. 'http://localhost:3000/api/...'로 요청을 보내면, 이 요청이 'http://localhost:8080/api/...'로 전달된다.

이 상황에서 axiosInstance의 baseURL을 8080으로 설정하면, 클라이언트는 직접적으로 8080 포트의 API 서버에 요청을 보내게 된다. 이때 Next.js 서버는 이번 요청 과정에 참여하지 않으므로 프록시 서버의 역할을 수행하지 못하고 있는 상태이다.

결과적으로, 프록시 서버를 우회한 직접 요청이 들어왔으니 Next.js는 CORS 정책에 의해 요청을 차단한다.

그렇기 때문에 axiosInstance.js 설정파일에서는 baseURL이 3000이 되어야 하는 것이다.
baseURL을 프론트 URL로 바꾸고 나면 axiosInstance로 보내는 요청은 모두 Next.js 프록시를 거치므로 더 이상 CORS 에러가 나지 않게 된다.