Vue.js CORS 설정하기

API를 연동하다보면 CORS를 자주 볼 수 있다. (프로젝트를 새로만들 때 마다 보는듯.. 😂)

서버쪽에서도 CORS 대응을 해주어야하지만 프론트쪽에서도 대응이 필요하다.

Vue.js CORS 설정

1. vue.config.js 파일 생성

프로젝트 root 경로에 vue.config.js 파일을 생성해준다. package.json 파일과 동일한 경로이다.

2. proxy 설정

proxy설정을 왜 해주어야 할까?
CORS는 요청하는 주소와 나의 주소 도메인이 달라서 발생한다.
즉, API주소와 웹페이지 주소가 달라서 발생하고 요청하는 주소와 나의 주소가 동일해야 정상적으로 응답받을 수 있다.
이러한 문제를 해결하기 위해 proxy설정을 해주어 api주소로 가는 요청을 웹페이지 주소로 가는 것처럼 바꿔서 CORS 문제를 해결할 수 있다.

• 로그인 API: http://127.0.0.1:17000/api/user/social-login
• 웹 주소: http://127.0.0.1:8080

웹 주소에서 API 주소로 로그인 처리를 하는 API를 요청한다고 가정해보자.
이 때 http://127.0.0.1:17000/api/user/social-login의 요청 API를 http://127.0.0.1:8080/api/user/social-login의 요청 API 처럼 바꿔주는 것이 proxy 설정이다.

module.exports = {
    devServer: {
        proxy: process.env.VUE_APP_BASE_API // http://127.0.0.1:17000/api
    }
}

앞서 생성한 vue.config.js에 해당 내용을 작성해준다.

• proxy 설정 전: 웹 페이지 -> 서버
• proxy 설정 후: 웹 페이지 -> proxy -> 서버

proxy 설정을 함으로써 API 통신을 할 때 proxy에 설정한 URL로 변경 되어 API 통신이 이루어진다.

http://127.0.0.1:8080/user/social-login의 URI로 API 요청을 했을 때 http://127.0.0.1:17100/api/user/social-login 요청 URI로 변경된다.

API 주소와 웹페이지 주소를 동일하게 함으로써 CORS를 해결하고 proxy를 설정을 통해 실제 API 주소로 변경해줌으로써 정상적인 응답값을 얻을 수 있다.

 

vue.config.js은 실행 시점의 정보를 가져오기 때문에 수정 후 재실행 해주어야한다.

다만, API 주소와 웹페이지 주소를 동일하게 해야함으로 axios에 base url을 설정해두었다면 삭제해주어야 한다.
base url을 API 주소로 설정해두었다면 API 주소와 웹페이지 주소가 다르기 때문에 proxy 설정과 관계 없이 CORS가 발생한다.

const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API,
  timeout: process.env.VUE_APP_BASE_API_TIMEOUT,
  withCredentials: true
})

axios config에서 baseURL을 삭제해준다.

결론

vue.config.js 파일에 proxy 설정에 사용할 API 도메인을 정의해놓고, 실제 호출할 때는 해당 프로젝트의 도메인으로 호출한다.
CORS 정말 지겹다 😁 그만 만나자구나.