Express.js CORS 오류 해결

👇🏻 해결법은 맨아래에

풀스택구현중, 프론트에서는 axios 라이브러리를 사용하여 백엔드와 API 연동을 진행하려고 하였다. 코드의 유지보수와 재사용성을 위해 http 클라이언트를 따로 구성하는 코드를 만들었고, export하여 axios를 더 보기 쉽게 사용할 수 있게 하였다. 

// http.ts
import axios, { AxiosRequestConfig } from "axios";

const BASE_URL = "http://localhost:3000";
const DEFAULT_TIMEOUT = 30000;

export const createClient = (config?: AxiosRequestConfig) => {
  const axiosInstance = axios.create({
    baseURL: BASE_URL,
    timeout: DEFAULT_TIMEOUT,
    headers: {
      "content-type": "application/json",
    },
    withCredentials: true,
    ...config,
  });

  axiosInstance.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

  return axiosInstance;
};

export const httpClient = createClient();

아래와 같이 클라이언트를 사용하여 카테고리를 요청하는 method를 구현하여 사용하였다.

import { Category } from "../models/category.modal";
import { httpClient } from "./http";

export const fetchCategory = async () => {
  const response = await httpClient.get<Category[]>("/category");
  return response.data;
};

하지만 fetch해서 가지고 올때 CORS 오류가 발생했다.

해결 방법

1️⃣ Express.js 기준, app.js에 아래 코드를 추가해준다.

const cors = require("cors");

const corsOptions = {
  origin: "http://localhost:3001", // 클라이언트 포트번호
  credentials: true,
};

app.use(cors(corsOptions));

 

2️⃣ 서버와 클라이언트의 주소를 잘 구분해주었는지 확인해준다.

프론트엔드 코드에서는 서버의 주소를 올바르게 적어주어야 한다.

// http.ts(FE)
const BASE_URL = "http://localhost:3000"; // 서버의 포트번호