vue-webpack打包之后多域名请求接口出现跨域问题-总结

本人今天项目上线，需一枚程序员祭天

问题描述：

和同事共同开发一个项目，两个团队，不同请求方式&语言，在本地运行的项目相安无事，各自安好，欢欢喜喜的准备上线了（小项目，没有测试环境and灰度环境），突然发现打包之后的项目，其中一种语言的请求出现跨域问题
当时在想不就是跨域吗？ 后端加上跨域请求通配符（*），前端加上webpack => devServer => proxy不就行了嘛～
说干就干～噼里啪啦～噼里啪啦～完美解决？

然鹅

我想多了，出现了新的报错

问题如下

问题截图

当时我脑子里是这样的
什么鬼？？
我在干什么？？
？？？？？

代码：

vue.config.js
请求接口-URL
实例默认配置
默默打开度娘，重新看了下同源策略；
搜索现在的问题所在，最终在一篇文章中提到了Cookie 的使用，有点启发；
不同域名下使用cookie跨域，浏览器的安全机制会默认阻止请求
于是
请求接口-URL代码修改 (添加全域名地址)

if (
        this.SearchType.value === "isnull" ||
        this.SearchType.value === "timeout"
      ) {
        url = "/www.baudu.com/rule/getStatusData";
        // url = "/rule/getStatusData";
        params = {
          project: this.ObjectType.value,
          // status: this.TypeType.value,
          type: this.SearchType.value
        };
      } else {
        url = "http://www.baudu.com/rule/getHitchData";
        // url = "/rule/getHitchData";
        params = {
          chargeDept: this.DutyType.value,
          type: this.SearchType.value
        };
      }

然后实例默认配置代码(修改禁止跨域时发送cookie,去除前端跨域请求通配符【注：后端已添加跨域】)

const instance = axios.create({
  timeout: 100000, // 设置超时时间
  // withCredentials: true, // 跨域时是否发送cookie
  baseURL: window.location.origin, // 设置请求基地址
  headers: {
    "content-type": "application/x-www-form-urlencoded"
    // "Access-Control-Allow-Origin": "*"
  }
});

重新启动前端服务，项目数据一切正常，整体耗时4小时