📍CORS란?

웹 애플리케이션이 다른 출처의 리소스에 접근하려 할 때 발생할 수 있는 보안 메커니즘이다. 브라우저는 보안을 위해, 스크립트가 현재 페이지와 다른 도메인, 프로토콜, 또는 포트에서 리소스를 요청하는 경우 이를 제한한다.
MDN

프로젝트를 http://localhost:3000 에서 실행하고 있을 때, API 요청을 https://api.example.com 으로 보내게되면, 브라우저는 해당 요청을 다른 출처에서 온 것으로 간주한다. API 서버가 CORS 헤더를 적절히 설정하지 않으면 브라우저는 보안상 이 요청을 차단하고, CORS 에러를 발생시킨다.

🔎 해결방법

Proxy 설정

프론트엔드에서는 프록시 서버를 설정하면 CORS 문제를 우회할 수 있다. 개발 환경에서 API 서버와 프론트엔드 서버가 서로 다른 도메인에 있을 때, 프록시 서버를 설정하면, 클라이언트는 실제 API 서버가 아닌, 로컬 개발 서버(프록시 서버 역할)로 요청을 보내게 된다. 프록시 서버는 이 요청을 받아서 실제 API 서버로 전달하고 응답을 클라이언트에 다시 반환하게된다.

프록시 서버를 사용하면, 클라이언트는 동일한 출처에서 요청을 보내는 것처럼 보이게 되어 CORS 에러를 피할 수 있다.

vite.config.ts

Vite를 사용하는 경우 vite.config.ts를 통해 프록시 설정이 가능하다.

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  resolve: {
    ...
  },
  server: {
    proxy: { // proxy 설정
      "/api": {
        target: "api 요청 URL",
        rewrite: (path) => path.replace(/^\/api/, ""),
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

• "/api": 이 경로로 시작하는 모든 요청이 프록시 설정에 따라 처리된다. 예를 들면, http://example/api/users와 같은 요청이 프록시 설정의 대상이 된다.

• target: 프록시할 대상의 URL을 지정한다. 실제 API 서버의 URL을 설정하면 된다.

• rewrite(path): 요청 경로를 재작성할 수 있다. 이 예제에서는 /api로 시작하는 경로를 제거하고 실제 API 서버로 요청을 보낸다. 예를 들어, /api/users는 /users로 변경된다.

• changeOrigin: 이 옵션이 true로 설정되면, 대상 서버로의 요청 헤더에 호스트 헤더가 변경된다. 예를 들어, API 서버가 다른 도메인에 있을 때, 이 옵션을 활성화하여 CORS 문제를 회피할 수 있다.

• secure: secure: false로 설정하면, SSL 인증서가 자가 서명된 경우에도 프록시가 허용된다. 개발 환경에서는 SSL 인증서가 완벽하지 않을 수 있으므로, 이를 무시하고 연결할 수 있도록 하는 설정이다.

참고

https://ko.vitejs.dev/config/server-options
https://trustmitt.tistory.com/73
https://despiteallthat.tistory.com/302