[vue] CORS 해결

작성일자 : 2022.06.19

환경 : vue 2, webpack-dev-server 4.8.1

시나리오 : 프록시를 활용하여 CORS 해결

 

관련 포스팅 : https://osc131.tistory.com/118

[Spring Boot] CORS 해결

 

1. webpack-dev-server 확인

 

package-lock.json 

"webpack-dev-server": {
	"version": "4.8.1"
    ...
    ...
}

사용하고 있지 않을 시 모듈 추가 필요

 

 

2.Proxy 설정 추가

 

vue.config.js

module.exports = {
  devServer: {
    proxy: {
	// /api 및 /api/* 요청에 대해 프록시 설정
      '/api': {	
        target: 'http://localhost:8080', // 프록시를 설정할 도메인
        changeOrigin: true,
      }, 
    },
  },
}

 

위 설정 이후 http://localhost:8080/api/* 에 대해 CORS 가 허용됨

 

 

* 주의 : 프록시 설정 이후 요청할 때 도메인 정보는 생략해야함

ex)

    const uri = '/api'; // 'http://localhost:8080/api' 로 작성 시 프록시 적용 X
    fetch(uri, {method: 'get'})
        .then(response => response.json())
        .then(response => {
            alert(response);
        })