[vue.js] CORS 해결 방법

서론

VueJS에서 axios를 이용하여 api를 받아오려고 시도했는데 CORS 문제가 발생하여 해결 방법을 정리해보도록 한다.

 

소스

axios.post("http://localhost:9090/iamgeUpload", formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
})
.then((res) => {
  console.log("res.data :", res.data);
});

문제

 

Access to XMLHttpRequest at 'http://localhost:9090/iamgeUpload' from origin 
'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://localhost:9090/iamgeUpload net::ERR_FAILED 400
dispatchXhrRequest @ xhr.js?b50d:220
xhrAdapter @ xhr.js?b50d:16
dispatchRequest @ dispatchRequest.js?5270:58
request @ Axios.js?0a06:109
httpMethod @ Axios.js?0a06:144
wrap @ bind.js?1d2b:9
eval @ EditorTest2.vue?76b0:70

 

원인

브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한합니다. 그래서 cross-origin 요청을 하려면 서버의 동의가 필요합니다. 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절합니다.

이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing)라고 부릅니다.

반응형

 

해결 방법

1. vue.config.js 생성

vue 프로젝트 root 위치에 vue.config.js를 생성한다. 만약 존재한다면 해당 파일에 추가하면 된다.

 

2. devServer - proxy 추가

module.exports = {
  devServer: {
    proxy: 'http://localhost:9090'
  }
};

저는 해당 프로젝트에 vuetify가 존재해서 추가하였고 없으신분은 하단 정보처럼 추가하면 됩니다. proxy 경로는 도메인만 적으시면 됩니다.

 

수정 소스

axios.post("/iamgeUpload", formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
})
.then((res) => {
  console.log("res.data :", res.data);
});

api 경로를 도메인을 제외한 경로로 호출하면 된다.

 

해결 테스트

정상으로 api가 호출되는것을 볼수 있다.