vue 에서 proxy 설정으로 CORS 해결

로컬에서 테스트를 하고싶은데 CORS가 날때 해결 방법

vue.config.js 에 proxy 설정 해주기

    devServer: {
        proxy: { // proxyTable 설정
            '/api': { // api 로 시작하는 소스 는 traget으로 잡아준다. > 사용할때 url 이 api 가 있어야 한다.
                target: process.env.VUE_APP_PROD_BASE_DOMAIN, // www.xxx.com
                changeOrigin: true
            },
             '/aw': { // aw로 url 이 시작하면 이렇게 target을 잡아준다. 
                target: process.env.VUE_APP_PROD_AW_DOMAIN,
                changeOrign: true
            }, 
        }
    }

이렇게 해주면 표면상으로

(내 아이피)121....:8080/api/getInfo 의 url 로 날리는 것 처럼 보이지만 proxy 를 거쳐 target으로 가게 됨

같은 도메인 , 포트번호를 사용하는 것처럼 보이게 만든다.

실제로 axios로 날릴때 target url을 빼고 그 뒤에 /api/getInfo 를 날려주면 됨

 

*** 중요한 것은 url + /api/getInfo 를 날리면 안되고 

/api/getInfo 이렇게 날려야 한다.