개발 환경에서 CORS (Cross Origin Resource Sharing) 에러 발생

[geniee1220]

문제 상황

Mock API 에서 배포된 서버로 API 요청을 보내면 CORS 에러로 요청이 실패하는 현상

Access to XMLHttpRequest at 'https://tweaver.site' from origin
'http://localhost:5173' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

문제 해결

Vite의 server.proxy를 사용하면 브라우저의 요청을 프록시 서버로 먼저 보내고, 프록시 서버가 실제 대상 서버에 요청을 전달할 수 있습니다. 이 설정을 통해 프록시 서버가 동일한 도메인에서 요청이 이루어진 것 처럼 보이도록 요청 도메인을 변경하게 되고, CORS를 우회할 수 있습니다.

/https://vitejs.dev/config/

// vite.config.ts

export default defineConfig({
  plugins: [...],
  resolve: {
    alias: [...],
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://tweaver.site',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
        ws: true,
      },
    },
  },
});

/api 라는 문자열이 target 에 지정한 문자열로 변환되어 사용됩니다.

export const getTestData = () => {
    return instance.get('/api/groups/test')
}