axios在vue3.0的版本下解决跨域

首先，这种跨域，是一种伪跨域，使用的是代理的方式

1、vue.config.js

由于vue3.0隐藏了vue.config.js，因此，我们首先要在项目的根目录创建一个vue.config.js文件，进行跨域的配置

2、编码

module.exports = {
  devServer: {
    proxy: {
      '/api': {                //   /api是习惯性的写法，可以随意改
        target: 'xxxxxxx', //接口域名
        changeOrigin: true,             //是否跨域
        ws: true,                       //是否代理 websockets
        secure: true,                   //是否https接口
        pathRewrite: {                  //路径重置
          '^/api': ''
        }
      }
    }
  }
};

这里需要注意的，两个点

第一个： /api 这个，是可以随意改动的，但是要注意，与后面的基址对应

第二个： target 接口域名，写你要访问的地址的url

3、配置axios基址

axios.defaults.baseURL = '/api'

当然，先引入axios，和vue-axios熬

4、发送请求

    this.axios.get('/index/index').then(resp=>{
      console.log(resp)
    }).catch(err=>{
      console.log(err)
    });

这里的get请求，访问 /index/index，全路径，是   xxxx/index/index，这里的xxx，就是上面的接口地址

5、重启

注意，改了配置文件，记得重启npm

搞定