vue3.0配置跨域

在项目中遇到了跨域问题，网上搜索了各种方法都没有成功

代码：

首先后台的接口是这样的  http://47.96.29.50:8080/api/v1/discAerator/list

于是配置了baseURL：

axios.defaults.baseURL = 'http://47.96.29.50:8080/api/v1';

然后按照网上配置了vue.config.js如下：

module.exports = {
  devServer: {
    open: true,
    port: 8080,
    proxy: {
      '/api': {
        target: `http://47.96.29.50:8080`,
        changeOrigin: true, 
        pathRewrite: {
          '^/api': ''
        }
      },

    }
  }
}

页面请求：

axios.get({ url: "/discAerator/list" }).then(res => {
        console.log(res);
      });

然后页面报错：

经过一番思索，将config配置中目标路径修改为：

 proxy: {
      '/api': {
        target: `http://47.96.29.50:8080/api/v1`,
        changeOrigin: true, 
        pathRewrite: {
          '^/api': ''
        }
      }
    }

然后baseURL修改：

axios.defaults.baseURL = '/api';

页面请求不变，此时再重启项目，跨域请求成功！

 

 

我是一个一年经验的前端开发小白，这次只是记录自己解决了问题，但是我的方法也不一定就能够解决你的问题。希望大家不要盲目复制，还是要自己多尝试解决。

 

这里祝大家进步飞快！