[지은] 잊을만 하면 나타나는 전남친 같은 놈 CORS - boostcampwm2023/web04-ALGOCEAN GitHub Wiki

[단순용어] CORS 와 Access-Control-Allow-Origin](https://duklook.tistory.com/209)

태호

• 인터넷에 검색을 해봤는데 FE 또는 BE에서 해결했을 때의 장단점을 잘 모르겠어요.
• 하지만 일반적으로 BE에서 해결한다고 합니다.

지은

문제 원인

Cross Origin Resource Sharing 정책을 따르지 않았기 때문.

dev(로컬)에서의 프론트엔드 request 도메인과 서버 response 도메인이 달라서 발생하는 문제였다.

프론트에서 해결 방법

문제 해결을 위해선 두 도메인을 맞춰줄 필요가 있다.

프론트엔드에서는 프록시를 사용하여 http 중간에서 도메인을 변경하는 방식으로 해결할 수 있다.

vite 환경에서 프록시를 적용하는 방법은 다음과 같다.

// vite.config.json
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://YOUR_OWN_URL',
        changeOrigin: true,
      }
    }
  }
})