[ Vue ] Vue3 CORS proxy로 해결하기

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

 

CORS오류 NodeJS에서 해결하는 방법 말고 Vue3에서는 proxy로 해결하는 방법이 있습니다.

 

 

해결방법

 

vue.config.js ( 없으면 생성해줍니다. 프로젝트 최상단 )

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true
      }
    }
  }
}

 

vue

setup() {
    const url = '/api';
    
    axios.get(url + '/memos')
    .then(res => {
        console.log(res);
    })
}