javascript跨域请求默认不携带cookie和认证凭证，需前后端协同配置：前端设credentials='include'或xhr.withcredentials=true，后端返回access-control-allow-origin（不可为*）、access-control-allow-credentials:true，并确保cookie含secure、samesite=none且domain匹配。
JavaScript 跨域请求默认不发送 Cookie 和认证凭证（如 HTTP Basic Auth、客户端证书等），这是浏览器出于安全考虑的默认行为。要让跨域请求携带 Cookie 和认证信息，需前后端协同配置，缺一不可。
前端：设置 credentials 选项
使用 fetch 或 XMLHttpRequest 发起请求时，必须显式启用凭证支持：
-
fetch：传入
{ credentials: 'include' }（推荐）；'same-origin'表示同源才发，'omit'（默认）表示从不发 -
XMLHttpRequest：在
open()后、send()前调用xhr.withCredentials = true
⚠️ 注意：credentials: 'include' 时，请求 URL 不能为 data:、blob: 等非 HTTP(S) 协议地址；且服务端必须明确允许该源（不能用 * 通配）。
后端：正确响应 CORS 头
服务端必须返回以下响应头，且满足特定条件：
-
Access-Control-Allow-Origin：必须指定具体协议+域名（如https://example.com），禁止使用*（否则浏览器会忽略 credentials） -
Access-Control-Allow-Credentials：值必须为true -
Access-Control-Allow-Headers（可选）：若前端自定义了请求头（如Authorization），需在此列出 -
Access-Control-Expose-Headers（可选）：若需读取自定义响应头（如X-Total-Count），需在此声明
例如 Node.js + Express 中的典型配置：
res.header('Access-Control-Allow-Origin', 'https://your-frontend.com');res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
Cookie 本身需满足安全要求
即使前后端都配对了，浏览器仍可能拒绝发送 Cookie，需确保：
- Cookie 设置了
SameSite=None（跨站请求必需） - Cookie 同时设置了
Secure属性（即只在 HTTPS 下发送）——这是SameSite=None的强制前提 - Cookie 的
Domain和Path与请求目标匹配（例如后端域为api.example.com，Cookie Domain 应设为.example.com或api.example.com）
例如后端设置 Cookie 的方式（Express）：
res.cookie('session_id', 'abc123', {httpOnly: true,
secure: true,
sameSite: 'None',
domain: '.example.com'
});
常见问题排查要点
- 控制台报错
Failed to fetch或Credentials flag is 'true'相关提示 → 检查Access-Control-Allow-Origin是否用了* - 请求发出但没带 Cookie → 查看请求头中是否含
Cookie字段；确认 Cookie 是否过期、Domain/Secure/SameSite 设置是否合规 - 预检请求（OPTIONS）失败 → 确保服务端正确处理 OPTIONS 方法，并返回上述 CORS 头
- 本地开发时前端用
localhost:3000、后端用localhost:8000→ 视为跨域，需按上述规则配置，且 Cookie 的Domain不能设为localhost（应留空或省略）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
