vue-cli 3.0的跨域问题解决和对axios路径配置

描述

最近一个项目，调节口的时候，出了这个问题，然后配了下，记录下，也有个地方可以保存。

直接上实现步骤

在vue.config.js的module.exports = {}里面新增一个节点，如果没有这个节点，在项目根目录新建一个即可。

上代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://xxxx/', //对应自己的接口，就是你请求的那个域名
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        ws: true,  // 是否启用websockets
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

注意点

注意点就是axios的配置问题

开启跨域后要注意一个问题，就是你axios请求的时候，请求的路径要注意了。

axios.get('/api/域名后面路径', function (res) { 
   console.log(res) 
   })

相当于/api代替了你之前的那个域名

当然你可以把这个/api配置成你的请求的baseURL ,后面打包部署时好处理。方便你部署下打包时的路径。

axios.defaults.baseURL='/api'

ok! 跨域就解决了！

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！