JavaScript Fetch 请求怎么配置 credentials 参数发送凭证-js教程-PHP中文网

fetch默认不发送cookie等凭证，credentials默认为'omit'；设为'same-origin'仅同源发送，'include'则始终发送（跨域时后端须返回access-control-allow-credentials: true且access-control-allow-origin不能为*）。

javascript fetch 请求怎么配置 credentials 参数发送凭证

JavaScript 的 fetch 请求默认不发送 Cookie、HTTP 认证头等凭证信息，必须显式设置 credentials 参数才能让浏览器在跨域或同域请求中携带凭证。

credentials 可选值及含义

credentials 是一个 RequestInit 配置项，有三个合法值：

'omit'：绝不发送凭证（默认值），即使当前是同源请求，也不会带上 Cookie 或 Authorization 头；
'same-origin'：仅当请求 URL 与当前页面同源（协议 + 域名 + 端口完全一致）时才发送凭证；
'include'：始终发送凭证，无论同源还是跨域（此时后端必须响应 Access-Control-Allow-Credentials: true，否则浏览器会拒绝响应）。

常见使用场景与配置示例

登录后调用受保护的 API 接口，通常需要保持会话（如服务端通过 Set-Cookie 设置了 session ID）：

fetch('/api/user/profile', {
  method: 'GET',
  credentials: 'include' // ✅ 关键：带上 Cookie
});

如果接口是跨域的（比如前端在 http://localhost:3000，后端在 http://api.example.com），还需确保后端响应头包含：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

Access-Control-Allow-Origin: http://localhost:3000（不能是 *）
Access-Control-Allow-Credentials: true

否则浏览器会因 CORS 策略拦截响应，控制台报错："CORS header ‘Access-Control-Allow-Credentials’ missing" 或 "The value of the ‘Access-Control-Allow-Origin’ header must not be the wildcard ‘*’"。

同源请求下 credentials 的实际影响

即使请求是同源的，credentials: 'same-origin'（或 'include'）仍是必要的——因为默认 'omit' 会导致 Cookie 不被发送，后端无法识别用户登录状态。

例如：

页面地址：https://example.com/dashboard
请求地址：https://example.com/api/orders（同源）
但若没设 credentials: 'include' 或 'same-origin'，浏览器不会附带 Cookie，后端收不到 session ID。

注意事项与易错点

使用 credentials: 'include' 时，Access-Control-Allow-Origin 不能为 *，必须指定明确的源（可动态匹配）；
fetch 不支持像 XMLHttpRequest 那样全局设置 credentials，每次调用都需手动传入；
某些环境（如 Service Worker）中，credentials 行为略有差异，建议统一用 'include' 并配合后端正确配置 CORS；
如果后端用 JWT 存在 localStorage，无需 credentials，因为 token 由前端手动添加到 Authorization 头中。

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