JavaScript 中 fetch 怎么携带 Cookie 发送跨域请求-js教程-PHP中文网

要让 fetch 在跨域请求中携带 cookie，关键在于前端设 credentials: 'include'，后端响应头 access-control-allow-origin 必须为具体源（不能是 *），且需配 access-control-allow-credentials: true，cookie 本身须满足 samesite=none; secure 或同源匹配条件。

javascript 中 fetch 怎么携带 cookie 发送跨域请求

要让 fetch 在跨域请求中携带 Cookie，关键在于同时设置两个选项：credentials: 'include' 和服务端响应头 Access-Control-Allow-Origin 不能为通配符 *，而必须指定明确的源（如 https://example.com）。

1. 前端 fetch 必须显式启用 credentials

默认情况下，fetch 跨域请求不会发送 Cookie。需手动添加 credentials 选项：

'include'：始终携带 Cookie（即使跨域），要求后端配合 CORS 配置
'same-origin'：同源时携带，跨域时不带（默认值）
'omit'：从不携带 Cookie

✅ 正确写法：

fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include' // 必须加这一行
});

2. 后端必须正确配置 CORS 响应头

仅前端设 credentials: 'include' 不够，浏览器会因安全策略拒绝响应，除非后端返回合法的 CORS 头：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

Access-Control-Allow-Origin：必须是具体域名，例如 https://your-frontend.com，不能是 *
Access-Control-Allow-Credentials：必须为 true
（可选但推荐）Access-Control-Allow-Headers：若带自定义头（如 Authorization），需明确列出

❌ 错误示例（后端返回）：

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

浏览器会直接拒绝该响应——因为 credentials: true 与 Origin: * 不兼容。

3. Cookie 本身需满足发送条件

即使前后端配置都对，Cookie 还需满足以下任一条件才能被自动带上：

Cookie 的 Domain 匹配请求目标域名（如请求 api.example.com，Cookie Domain 可为 .example.com 或 api.example.com）
Cookie 设置了 SameSite=None 且 Secure（即只能通过 HTTPS 发送）
请求是同源的（此时不受 SameSite 限制）

⚠️ 注意：Chrome 80+ 默认将 SameSite=Lax 作为 Cookie 默认值。如果 Cookie 没显式声明 SameSite，跨站请求（含跨域 fetch）可能被拦截。

4. 常见调试建议

打开浏览器开发者工具 → Network → 点击请求 → 查看 Request Headers 中是否有 Cookie 字段
检查 Response Headers 是否包含 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials: true
确认请求 URL 协议、域名、端口是否与 Cookie 的 Domain 和 Secure 属性一致

服务端若用 Express，可用 cors 中间件配置：

app.use(cors({
  origin: 'https://your-frontend.com',
  credentials: true
}));

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南