[React] Vite Proxy CORS 문제 해결하기

Vite를 사용하여 외부 API를 호출할 때, 때때로 CORS 문제가 발생할 수 있습니다. 이러한 문제는 API 호출에 실패하거나, 데이터를 받아올 수 없는 상황을 초래할 수 있습니다.

CORS는 Cross-Origin Resource Sharing의 약자로, 보안상의 이유로 브라우저에서 한 도메인의 자원을 다른 도메인에서 요청할 때 발생하는 문제입니다. 이를 해결하기 위해서는 프록시를 별도로 설정해주어야 합니다.

Vite에서는 Vite.config.js 파일에서 프록시 설정을 할 수 있습니다. 프록시 설정을 통해, API 요청을 보낼 때 Vite 개발 서버를 거쳐 요청을 보내기 때문에 CORS 문제를 우회할 수 있습니다.

 

프록시 설정하기

`Vite.config.js` 파일 수정

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  server: {
    proxy: {
      "/api": {
        target: "http://아이피:포트/api/v1",
        rewrite: (path) => path.replace(/^\/api/, ""),
        changeOrigin: true,
        secure: false,
        ws: true,
        configure: (proxy, _options) => {
          proxy.on("error", (err, _req, _res) => {
            console.log("proxy error", err);
          });
          proxy.on("proxyReq", (_proxyReq, req, _res) => {
            console.log("Sending Request to the Target:", req.method, req.url);
          });
          proxy.on("proxyRes", (proxyRes, req, _res) => {
            console.log(
              "Received Response from the Target:",
              proxyRes.statusCode,
              req.url
            );
          });
        },
      },
    },
  },
});

 

index.tsx

Axios를 이용해 API를 호출할 때, CORS 문제를 해결하기 위해 인덱스 파일 상단에 Axios 설정 값을 추가하거나, 각 API 호출 코드에서 URL을 입력해야 합니다.

import axios from "axios";

axios.defaults.baseURL = "http://아이피:포트/api/v1";

 

API 호출 파일 예제

import axios from "axios";
import { APIProps, ResponseProps } from "../interface/responseInterface";

/**
 * * 로그인
 * @param data : Data Json
 * @returns {
 *  status: success | failure | expire
 * }
 */
export async function SignInAPI({ data }: APIProps): Promise<ResponseProps> {
  let result: ResponseProps;

  await axios
    .post(`/signin`, data, {
      validateStatus: (status: number) => {
        // 500 오류 이상일때 거부, 나머지는 통과
        return status < 500;
      },
    })
    .then((res) => {
      result = res.data;
    })
    .catch((error) => {
      console.error(error);
    });

  return new Promise((resolve, reject) => {
    try {
      switch (result.status_code) {
        case "200":
          resolve(result);
          break;
        default:
          reject(new Error(result.message));
          return;
      }
    } catch (error: any) {
      console.error(error);
      reject(new Error(error));
    }
  });
}

위와 같이 프록시를 설정해 주고 API를 호출해 주면,  CORS 문제없이 서버 호출이 가능합니다.