webpack独立接口跨域配置

我们通常会再vue.config.js中配置全局的baseUrl，但在项目中总有一些特殊接口需要单独处理，这种接口跟全局baseUrl无关，它可能是三方接口。
https接口调用时可能会发生跨域问题。
此时需要在vue.config.js中配置devServer，新增独立url的跨域配置

module.exports = {
  // 省略其它配置......
  devServer: {
    host: "0.0.0.0",
    port: port,
    open: true,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `https://wad.wad100.com`,
        changeOrigin: true,
        pathRewrite: {["^" + process.env.VUE_APP_BASE_API]: ""},
      },
      // 配置独立url，通过/track指向
      "/track": {
        target: `https://api.dcadmin.cn`, // 目标服务器
        changeOrigin: true, // 允许跨域
        pathRewrite: { '^/track': '' } // 如果不希望传递/track，则重写为空：""
      },
    },
    disableHostCheck: true,
  },
}

在这里配置好后，我们就可以直接使用接口了，我在这里举个例子：
直接通过axios请求接口：

import axios from "axios";
import CryptoJS from "crypto-js";

export const trackLogin = () => {
  return new Promise(async (resolve, reject) => {
    try {
      let res = await axios({
        method: "get", // get请求
        url: "/track/interface?goodsType=admin", // 通过/track来指向配置的url
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      });
      resolve(res);
    } catch (err) {
      reject(err);
    }
  });
};

在这里就可以通过/track来直接指向https://api.dcadmin.cn服务器

注意点
1、如果调用的三方接口，尽量注意一下三方接口的请求头配置，如果changeOrigin: true配置完还是跨域，可能需要按照三方接口文档配置一下请求头。

---

参考：
webpack文档：devServer