vue-cli3.x 4.x通过devServer配置代理解决跨域问题

在vue.config.js中配置devServer项目,如下:可以配置多个代理地址

  devServer: {
    // open: process.platform === 'demo',
    // host: 'localhost',
    // port: 8080,
    // open: true, //配置自动启动浏览器
    proxy: {
      "/opAdmin": {
        target: "http://116.65.61.193:8081", //对应服务器的接口
        changeOrigin: true,
        pathRewrite: {
          "^/opAdmin": "/opAdmin" //将以 /opAdmin 开头的接口重写http://116.65.61.193:8081/opAdmin ,调用时直接以 /opAdmin开头即表示调用http://116.65.61.193:8081/opAdmin
          // "^/opAdmin": "/" //将以 /opAdmin 开头的接口重写http://116.65.61.193:8081/ ,调用时直接以 /opAdmin开头即表示调用http://116.65.61.193:8081/
        }
      },

      "/openParkApi": {
        target: "http://116.65.61.193:8087", //对应服务器的接口
        changeOrigin: true,
        pathRewrite: {
          "^/openParkApi": "/openParkApi" //重写接口
        }
      },
    }
  }

注意:修改完vue.config.js文件需要重新npm 重启项目才能生效!!!

然后在axios中封装拦截中不要配置baseURL选项,并且通过下面代码配置正式环境的接口地址(在axios封装中)

    //此处的url为封装axios时的请求地址参数
    if (process.env.NODE_ENV === "development") {
      url = "/opAdmin" + url;//当vue.config.js中的pathRewrite为{"^/opAdmin": "/"}时 (前端项目和后端接口最后部署在一起)
      // url = "http://www.webapi.com/api"+url 或者这样写,根据具体情况去配置 (前端项目和后端接口最后没有部署在一起)
    }

最后调用接口:

    this.$http
        .get("/openParkApi/v1/common/qiniu/token")
        .then((res) => {
          if (res.data.upToken) {
            this.token = res.data.upToken;
          }
        });

此处的以/openParkApi开头的接口会知道匹配到http://116.65.61.193:8087/openParkApi这个接口地址