Vue3跨域问题Access to XMLHttpRequest at ‘http://127.0.0.1:8000/login‘ from origin ‘http://127.0.0.1:8080‘......

这一个bug折磨了我一下午，终于解决了

1. 首先解决跨域问题需要修改vue.config.js文件
   在vue.config.js中添加

   devServer: {
       proxy: {
         '/api': { 
           target: 'http://127.0.0.1:3001/', //接口
           changeOrigin: true,//允许跨域
           ws: true,
           pathRewrite: {
             '^/api': ''
           }
         }
       }
     }
   

2. 在使用接口的时候使用刚刚在vue.config.js中定义的 '/api' 代替

   • loginEvent: function () {
         alert('login')
         this.$axios.get('/api/get', {  // 代替
             params: {
                 msg: 'bbb'
             }
         })
             .then(function (response) {
             console.log(response.data)
         })
     }
     
     

3. 最关键的来了

   • 如果你自行对axios进行封装，并且封装文件中有 axios.defaults.baseURL=... 这一条，请务必将这一条删除

   ---

   不删的话还是会报错，这第三条才是我被折磨一下午的主要原因TAT