使用webpack proxy配置开发环境代理，解决跨域问题。（Vue cli 3也适用）

解决方案我写了一个例子，觉得有用的话，点个star。

地址：https://github.com/janyxh/vue-study/blob/master/vue.config.js

-------------------------- 分割线 -----------------------

最近调试接口，使用本地ip对接接口调试，在同事的机子上调试。
在Swagger和Postman上调试都没有问题，一放进项目里，报错了。

众所周知，跨域是源于同源策略（同协议，同主机，同端口）的限制，解决跨域的方式很多种，本文只讲解一下如何使用webpack配置开发环境的跨域。

第一，配置webpack代理

打开 webpack 配置文件，进入开发环境下配置。在module.exports的dev对象下。
如果是 vue cli 3 ，刚进入vue.config.js。如果没有vue.config.js文件，在项目的根目录下，创建一个。在module.exports的dev对象下配置，也可以在configureWebpack: config=>{ ... } 函数内判断开发环境，然后config.devServer = { 配置信息 }

配置信息如下：

devServer: {
    proxy: {
      "/api": {
        target: "http://172.16.1.18:8769", 
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

参数解读：
"/api"： 指接口调用时，遇到接口路径为 api 时，则代理转发到 target 的配置url上
target： 开发环境调用的接口地址
changeOrigin：改变源到url，在虚拟主机上很有用
pathRewrite：是指服务器把接口中api去掉，以免api这几个字母加入到接口地址中

第二，修改调用接口的域名

修改接口地址开头的调用地址，例如：

let base = ''; // 测试'

if (process.env.NODE_ENV === "development") {
  base = "/api/move-server"; // 开发
} else if ( process.env.NODE_ENV === "production") {
  base = ''; // 线上
}

重启一下服务，可以看到，此时已经可以正常访问了。状态码为200，图片已经读取到。