Vite에서 CORS 에러 해결기

첫 번째 기업 과제에서 api 호출 중 CORS 에러가 발생했다.
(기업 URL이 포함되어 에러 메시지는 생략)

처음에는 아예 요청이 되지 않거나 404 에러가 떴는데 이후 경로를 맞추고 나서 요청은 200번이 되었다.

처음에 설정한 vite.config.ts

주석은 여러 가지를 시도해본 흔적이다. pathRewrite에서는 key 부분부터 에러가 났고 ws는 websocket 사용 시 필요하다고 한다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgr({
      exportAsDefault: true,
    }),
    tsconfigPaths(),
  ],
  server: {
    proxy: {
      '/api': {
      	target: '서버 BASE_URL(~.com까지),
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
        // ws: true, // 찾아보니 websocket할 때 필요한 부분이라고 함
      },
    },
  },
});

네트워크 탭에서는 200번이고 에러 메시지에 있는 응답 링크를 클릭하면 데이터가 잘 응답된 api 화면으로 이동했지만, 여전히 로컬호스트 브라우저 화면에서는 데이터를 확인할 수 없었다.

그런데..!

vite 공식문서에서 아직 시도해보지 않은 코드를 넣으니 해결이 되었다. 👏👏

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgr({
      exportAsDefault: true,
    }),
    tsconfigPaths(),
  ],
  server: {
    proxy: {
      '/api': '서버 BASE_URL(~.com까지),
    },
  },
});

여태 시도한 코드 바로 위에 있던 '/foo~'로 시작한 코드였다. vite에서는 CRA처럼 package.json에 proxy 한 줄을 추가하는 방법은 사용할 수 없고 이렇게 vite.config.ts를 조절해야 하는 듯 하다.

이제 프론트에서 cors 에러가 발생해도 (서버쪽에 origin 헤더 설정이 되어있다는 전제 하에?) 혼자서도 해결할 수 있게 되었다. 👱‍♀️👱‍♀️