[vue.js] has been blocked by CORS policy: No 'Access-Control-Allow-origin' header is present on the requested resource.

 

 

vue에서 axios를 호출하여 데이터를 호출할때 CORS 오류가 난 모습

 

vue.config.js 에서 아래와같이 코드 작성해주면된다

module.exports = defineConfig({

  devServer: {
    proxy: {
      '/api': {
        target:'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
  
});

위와 같이 정의를해주면

/api/memberList 로 호출하면 localhost:8080/memberList 로 호출이 된다!

 

 

 

그리고나서 실행해보면,, 

이제 CORS 관련 오류는 나지않고 데이터가 잘 받아와지는 모습