[Vue] CORS 해결

CORS 오류가 발생했을 때, 서버에서 Access-Control-Allow-Origin 설정해주는 방법 이외에 프론트에서 처리 할 수 있는 방법이 있다.
바로 proxy를 설정해주면 되는데, 다음은 Vue에서 proxy 설정 해주는 방법이다.

vite.config.js

  server: {
    port: 9000
    proxy: {
      '/board/v1': 'http://192.168.0.47:8080',
    }
  }

• port : 프론트 서버를 9000번 포트로 실행
• proxy : 9000번 포트로 들어온 /board/v1 으로 들어온 요청을 http://192.168.0.47:8080 여기로 넘겨줌

요청 자체는 http://localhost:9000/board/v1으로 보여지게 되지만 vite.config.js의 서버 proxy 설정으로 인해서 해당 요청은 http://192.168.0.47:8080여기로 넘어가게 된다.

이렇게 된다면, 프론트와 백엔드 서버는 서로 동일한 출처의 리소스로 인식을 해서 CORS 문제가 해결되게 된다.
하지만, 해당 설정은 local에서 실행할 때만 적용이되고 배포시에는 서버에서 Access-Control-Allow-Origin을 설정하거나, nginx에서 proxy설정을 해주어야 한다.