带认证请求触发CORS通配符不允许错误的排查求助

核心问题 #

认证请求触发cross-origin resource sharing error wildcard origin not allowed，本质是浏览器接收到的响应头包含Access-Control-Allow-Origin: *，但当请求携带Authorization头或开启withCredentials: true时，浏览器不允许用通配符作为允许的源，必须指定具体域名。

可能原因 #

1. 服务器CORS配置未生效：响应头返回通配符说明自定义的CORS规则没起作用。大概率是allowedOrigins中的域名格式错误——浏览器发送的origin是带完整协议（http/https）的完整地址，而你配置的"planner"、"grateful"是缩写，导致allowedOrigins.includes(origin)匹配失败，触发了默认CORS设置或ngrok自带的响应头。
2. 重复CORS中间件：服务器代码中可能存在多个CORS配置，比如框架默认的cors()调用（无参数时会返回Access-Control-Allow-Origin: *），覆盖了你自定义的规则。
3. ngrok隧道异常：免费静态域名可能存在配置变动，或ngrok自身返回了额外的CORS响应头。

解决方案 #

1. 修正域名格式 #

将允许的源和axios的baseURL都改为带完整协议的地址：

• 服务器端配置：

const allowedOrigins = [
  "https://planner.yourhost.com", // 替换为实际前端部署的完整地址
  "https://grateful.ngrok.io"     // 替换为实际ngrok静态域名的完整地址
];

• axios配置：

const $auth = axios.create({
  baseURL: "https://grateful.ngrok.io", // 完整地址
  withCredentials: true,
});
const $public = axios.create({
  baseURL: "https://grateful.ngrok.io", // 完整地址
  withCredentials: true,
});

2. 调试CORS匹配逻辑 #

在服务器的CORS回调中添加日志，确认实际请求的origin值：

origin: function (origin, callback) {
  console.log("请求Origin:", origin); // 打印到服务器日志
  console.log("允许的Origin列表:", allowedOrigins);
  if (!origin || allowedOrigins.includes(origin)) {
    callback(null, true);
  } else {
    callback(new Error("CORS not allowed"));
  }
},

通过日志确认请求的origin是否在允许列表中，若不在则调整允许列表内容。

3. 排查重复CORS配置 #

检查服务器代码中是否有其他CORS相关中间件，比如未删除的默认cors()调用，确保只保留你自定义的CORS配置。

4. 验证ngrok隧道状态 #

• 登录ngrok控制台确认静态域名grateful是否正常生效，隧道是否在线。
• 直接访问ngrok域名的API接口，查看响应头是否仍存在Access-Control-Allow-Origin: *，若存在则尝试重新创建隧道。

5. 开发环境临时测试方案 #

若以上步骤未解决，可临时允许所有请求源（仅限开发测试，生产环境禁用）：

origin: function (origin, callback) {
  callback(null, origin); // 允许所有请求源
},

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