当使用 credentials: 'include' 时，Access-Control-Allow-Origin 不能为 '*'，必须是明确源，且必须返回 Access-Control-Allow-Credentials: true，否则浏览器拒绝响应并报 CORS 错误。
当使用 credentials: 'include' 发起跨域请求时，若服务端未正确配置响应头，浏览器会直接拒绝响应并抛出“CORS error”或“Failed to fetch”，而控制台可能只显示模糊的网络错误，实际根源常是 Access-Control-Allow-Origin 与 credentials 的冲突。
确认报错是否由 Credentials 引起
打开浏览器开发者工具的 Network 面板，找到失败的请求，点击查看详情：
- 查看 Response Headers 中是否存在
Access-Control-Allow-Origin: *—— 这是典型冲突点：带 credentials 时，该值**不能为通配符***，必须是明确的源（如https://a.com） - 检查是否缺失
Access-Control-Allow-Credentials: true—— 此响应头必须存在且值为true，否则浏览器禁止将响应返回给 JS - 观察 Console 中的错误信息，常见提示如：
“The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'”
前端代码需匹配服务端策略
前端发起请求时，credentials 选项和服务端响应必须严格对应：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 若前端设为
credentials: 'include'，服务端必须返回：
Access-Control-Allow-Origin: https://your-frontend-domain.com（不能是*）
Access-Control-Allow-Credentials: true - 若后端只能返回
Access-Control-Allow-Origin: *（例如公开 API），前端就必须改用credentials: 'omit'（默认值），此时无法携带 Cookie 或授权头 - 注意：即使前端没显式写
credentials，某些库（如 Axios）在配置了withCredentials: true时也会触发相同限制
后端常见修复方式（以 Express 为例）
避免硬编码 Origin，应根据请求头中的 Origin 动态反射（需校验白名单）：
立即学习“Java免费学习笔记（深入）”；
app.use((req, res, next) => {
const origin = req.headers.origin;
// 仅允许可信域名
if (['https://a.com', 'https://b.com'].includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Access-Control-Allow-Credentials', 'true');
}
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
⚠️ 注意：不要无条件反射 req.headers.origin，否则等同于开放任意源，存在安全风险。
调试小技巧
- 用 curl 模拟请求验证服务端响应头：
curl -I -H "Origin: https://a.com" -H "Cookie: test=1" https://api.example.com/data，检查返回头是否合规 - 临时禁用浏览器安全策略测试（仅开发环境）：
Chrome 启动时加参数--user-data-dir=/tmp/chrome --disable-web-security（不推荐长期使用） - 如果使用代理（如 Webpack DevServer、Vite 的 proxy），确保代理配置也透传了 Origin 和 credentials 相关头
