VueJS应用调用私有第三方API配置代理仍报CORS错误如何解决

你当前devServer代理不生效的核心原因是前端请求未走本地devServer转发路径，直接向http://localhost:8080发起了跨域请求，浏览器同源策略直接拦截了响应，和代理配置本身是否写对没有直接关系——你贴出的报错里请求地址还是8080端口，足以证明请求根本没经过3000端口的本地开发服务。

1. 修正代理配置，显式开启必要参数 #

不要用简写的代理配置，补全匹配规则和参数，避免漏转发、host校验失败问题，修改vue.config.js后必须重启本地开发服务（配置文件修改不触发热更新）：

module.exports = {
  devServer: {
    port: 3000, // 固定前端启动端口为3000，避免端口漂移
    proxy: {
      // 匹配所有接口请求转发到8080服务
      '/': {
        target: 'http://localhost:8080',
        changeOrigin: true, // 必须开启，修改请求host为目标服务地址，绕过对方服务的host校验
        // 无特殊前缀冲突不需要配置pathRewrite
      }
    }
  }
}

2. 修正前端请求地址，全部改用相对路径 #

首先检查axios全局配置，删除开发环境下写死的http://localhost:8080的baseURL配置，全局baseURL留空或填/即可。
所有接口请求不要写绝对地址，统一用根路径开头的相对路径，保证请求先发到本地3000端口的devServer，由服务端完成转发（服务端转发不受浏览器CORS限制）：

// 原请求的相对路径前补/，避免相对路径拼接出错
axios
.post("/patient/request/" + this.$store.state.token, {
    patients: [
        {
            index: "1",
            patientIdentifier: {
                domain: "mdat",
                name: "pat_id",
                id: this.id,
                type: "localIdentifier",
            },
        },
    ],
})
.then((response) => {
    if (response.data.patients.length === 0) {
        this.showAlert(
            this.$t("requestPSNbyID.not_found"),
            "error"
        );
    } else {
        this.dataLoad = response.data.patients[0].patient;
        console.log(this.dataLoad);
        this.rpsn = true;
    }
    this.$store.dispatch("getToken", this.payload);
})
.catch((error) => {
    this.errorHandler(error);
});

注意：你报错中提到的/ths/rest/sessions接口（大概率是token鉴权相关接口）也同样存在写死8080绝对地址的问题，必须同步改成相对路径，否则依然会触发跨域报错。
改完重启服务后，在浏览器控制台看请求地址应该是http://localhost:3000/xxx，而非8080端口，即代表代理生效。

• 本地调试临时方案：启动独立的浏览器调试实例，关闭CORS校验，仅用于本地开发调试，不要用该实例日常访问网页：
  • Windows系统Chrome启动命令：

  chrome.exe --user-data-dir="C:\temp\chrome-dev-profile" --disable-web-security
  

  • Mac系统Chrome启动命令：

  open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/tmp/chrome-dev-profile
  

  启动后浏览器顶部出现「您使用的是不受支持的命令行标记：--disable-web-security」提示即代表配置生效，所有跨域限制会被临时放开。
• 生产环境根本方案：联系第三方API服务方，在服务响应头添加CORS允许配置：

  Access-Control-Allow-Origin: 你的前端服务域名（带凭证请求时不能填*，必须写明确域名）
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
  Access-Control-Allow-Headers: Content-Type, Authorization, 业务自定义请求头
  // 接口需要携带Cookie时额外添加
  Access-Control-Allow-Credentials: true
  

• 通用兼容方案：搭建一层自有Node服务作为转发层，前端所有请求发给自有Node服务，由Node服务端转发请求到第三方API（服务端发请求无浏览器同源限制），开发、生产环境均可使用，不需要第三方服务做任何修改。

内容的提问来源于stack exchange，提问作者Killian Pierce