开发环境 vue-cli3 配置跨域

参考资料：

vue-cli3的devServer

webpack的dev-server配置

http-proxy-middleware

vue-cli 3.0之跨域请求devServer代理配置    // 这个讲得很清楚啦

 

建议去了解webpack和http-proxy-middleware感觉会比较清楚了

在vue.config.js文件（如果没有则创建）中配置：

module.exports = {
  devServer: {
    proxy: {
      '/v1': {
        target: 'http://192.168.1.33:9888', // 目标地址
        changeOrigin: true, //是否跨域
        ws: true,
        //重写路径  需要设置重写的话，要在后面的调用接口前加上/v1 来代替target
        pathRewrite:{
          // '^/v1': '',
        }
      // 可配置多个，如果路径有多个的话
      // '/v2': {
      //  target: 'http://192.168.1.33:9888', // 目标地址
      //  changeOrigin: true, //是否跨域
      //  ws: true,
        //重写路径  需要设置重写的话，要在后面的调用接口前加上/v2 来代替target
      //  pathRewrite:{
          // '^/v2': '',
      //  }
      }
    }
  }
}

如果项目用的是axios，则在axios中配置，只要将baseURL配置为空字符串''

axios.create({ baseURL:'' })

如果axios的baseURL配置为'/v1'， 那么需要在proxy中重写路径， 否则不能跨域

pathRewrite:{
  '^/v1': '',
}

如果想要代理所有路径，那么可以在proxy中配置（将'/v1'改为'/）：

proxy: {
  '/': { // '/'匹配所有路径，所有请求都会被代理
    target: 'http://192.168.1.33:9888',
    changeOrigin: true,
    ws: true
  }
}

这样子就解决了跨域啦

 

PS： 这是其中一种不需要后台配合的解决跨域的方式，附上跨域解决方案链接，挺全的了：

前端常见跨域解决方案（全）