跨域请求携带 cookie 需前后端协同配置:前端设 credentials: 'include' 或 xhr.withcredentials = true;后端响应头须指定 access-control-allow-origin(非*)、access-control-allow-credentials: true,并确保 cookie 含 samesite=none 和 secure(https 下),且预检请求正确响应。

当需要跨域请求并携带 Cookie、HTTP 认证信息等凭证时,浏览器默认会阻止发送这些敏感凭据。要让跨域请求成功携带凭证(如 Cookie),必须同时满足前端和后端的特定配置要求,缺一不可。
前端:显式开启 credentials
使用 fetch 或 XMLHttpRequest 发起请求时,必须手动设置凭证模式为 'include':
-
fetch:添加
credentials: 'include'选项 -
XMLHttpRequest:调用
xhr.withCredentials = true - 注意:
credentials: 'same-origin'和'omit'均不会发送凭证;只有'include'才会尝试携带 Cookie 等信息
后端:CORS 响应头必须精确匹配
服务端响应中需包含以下关键头字段,且不能使用通配符 *:
-
Access-Control-Allow-Origin:必须指定具体协议+域名(如https://example.com),不可为* -
Access-Control-Allow-Credentials:值必须为true(小写) -
Access-Control-Allow-Headers(如需自定义头):列出允许的请求头,例如Content-Type, Authorization -
Access-Control-Allow-Methods(如需非简单方法):明确列出允许的 HTTP 方法,如GET, POST, PUT
若后端用了 Express + cors 中间件,需这样配置:
app.use(cors({ origin: 'https://example.com', credentials: true }));
Cookie 本身也需符合安全策略
即使 CORS 和 credentials 都配对了,浏览器仍可能因 Cookie 属性拒绝发送:
- Cookie 必须设置
SameSite=None,否则跨域时被拦截(尤其 Chrome 80+) - 若站点启用了 HTTPS,
SameSite=None的 Cookie 还必须同时带Secure标志 - 确保 Cookie 的
Domain和Path范围覆盖当前请求目标(例如后端是api.example.com,Cookie 的 Domain 应设为.example.com)
预检请求(Preflight)不能被忽略
当请求含自定义头、非简单方法(如 PUT/DELETE)或 Content-Type 非 application/x-www-form-urlencoded 等时,浏览器会先发 OPTIONS 预检请求。此时后端必须正确响应预检,包括:
- 对 OPTIONS 请求返回 200 状态码
- 响应头中包含上述所有 CORS 头(尤其是
Access-Control-Allow-Credentials: true和具体Access-Control-Allow-Origin) - 不遗漏
Access-Control-Allow-Headers和Access-Control-Allow-Methods
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











