必须设置 credentials: "include" 才能发送 cookie,跨域时后端还需返回 access-control-allow-origin(非*)和 access-control-allow-credentials: true,且 cookie 的 samesite、secure 等属性需匹配请求场景。

要在 JavaScript 中使用 Fetch API 发送 Cookie 凭证信息,关键在于设置 credentials 选项为 "include"(或 "same-origin"),否则浏览器默认不会携带 Cookie。
必须设置 credentials 选项
Fetch 默认不发送 Cookie,即使当前域已存在有效 Cookie。你需要显式指定:
-
credentials: "include"—— 总是发送 Cookie(跨域和同域都发) -
credentials: "same-origin"—— 仅同域请求发送 Cookie(默认行为,但显式写出更清晰) -
credentials: "omit"—— 从不发送 Cookie(等同于未设置)
例如发起带 Cookie 的登录后请求:
fetch('/api/profile', {<br> method: 'GET',<br> credentials: 'include' // ? 这一行必不可少<br>})
后端需配合设置 CORS 响应头
如果请求是跨域的(比如前端在 http://localhost:3000,后端在 https://api.example.com),仅前端设 credentials: 'include' 不够,后端响应中还必须包含:
-
Access-Control-Allow-Origin:不能为*,必须指定确切源(如http://localhost:3000) -
Access-Control-Allow-Credentials: true:明确允许携带凭证
否则浏览器会直接拒绝响应,控制台报错:Response to preflight request doesn't pass access control check。
确保 Cookie 本身可被发送
服务端 Set-Cookie 时,若设置了以下属性,会影响前端是否能自动携带:
-
SameSite=Strict或SameSite=Lax:在跨站请求中可能被浏览器阻止发送(尤其是Strict) -
Secure:仅在 HTTPS 下发送,开发时若用 HTTP(如 localhost),需去掉该标志或启用 HTTPS -
HttpOnly:不影响 Fetch 发送,只限制 JS 读取;Cookie 仍会随请求自动发出
开发调试建议:用浏览器开发者工具的 Network 面板检查请求的 Request Headers 中是否有 Cookie: 字段,确认是否真正发出。
常见错误与验证方式
容易踩的坑:
- 忘记写
credentials: 'include',尤其在封装 fetch 工具函数时漏掉 - 跨域时后端返回
Access-Control-Allow-Origin: *,与credentials: 'include'冲突 - 后端没返回
Access-Control-Allow-Credentials: true - Cookie 过期、域名不匹配或路径(
Path)不符导致未被选中发送
快速验证:在 DevTools 的 Application → Cookies 中确认目标域名下有对应 Cookie;再看 Network 中该请求的请求头是否含 Cookie。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











