JavaScript Fetch API 中怎么发送跨域带凭证的复杂请求-js教程-PHP中文网

关键在于前端设 credentials: 'include' 且后端响应 access-control-allow-origin（非*）、access-control-allow-credentials: true，并正确处理预检请求（options），同时 cookie 需含 samesite=none 和 secure 属性。

javascript fetch api 中怎么发送跨域带凭证的复杂请求

在 JavaScript Fetch API 中发送跨域带凭证的复杂请求，关键在于正确配置 credentials 选项和处理预检（preflight）流程。默认情况下，Fetch 不发送 Cookie，也不允许跨域携带身份凭证；而“复杂请求”（如带自定义 header、使用 PUT/DELETE 方法等）会触发浏览器先发一个 OPTIONS 预检请求，后端必须明确响应相关 CORS 头，否则请求会被拦截。

设置 credentials: 'include'

要让请求携带 Cookie、HTTP 认证信息等凭证，必须显式设置 credentials 为 'include'（不能用 'same-origin' 或省略）：

注意：此时服务端响应头中 Access-Control-Allow-Origin 不能是通配符 *，必须指定确切的源（如 https://example.com）；
同时需返回 Access-Control-Allow-Credentials: true，否则浏览器拒绝响应；

示例写法：

fetch('https://api.example.com/data', {<br>
  method: 'PUT',<br>
  credentials: 'include',<br>
  headers: { 'Content-Type': 'application/json' },<br>
  body: JSON.stringify({ x: 1 })<br>
});

处理复杂请求的预检要求

当请求满足以下任一条件时，浏览器会自动发起 OPTIONS 预检：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

使用 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH 等非常规方法；
设置了自定义请求头（如 X-Request-ID、Authorization）；
Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain（例如设为 application/json 就会触发）。

此时后端必须正确响应预检请求，至少包含：

Access-Control-Allow-Origin：同上，不能为 *（若带凭证）；
Access-Control-Allow-Credentials: true；
Access-Control-Allow-Methods：列出允许的方法（如 GET, POST, PUT, DELETE）；
Access-Control-Allow-Headers：列出允许的请求头（如 Content-Type, Authorization, X-Requested-With）；
Access-Control-Max-Age（可选）：缓存预检结果时间（秒）。

常见踩坑点

前端漏设 credentials: 'include' → 请求不带 Cookie，登录态丢失；
后端 Access-Control-Allow-Origin 写成 * → 浏览器报错 “The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'”；
后端未处理 OPTIONS 请求或返回头缺失 → 控制台显示预检失败（CORS error），主请求根本不发出；
Cookie 缺少 SameSite=None; Secure 属性（尤其 HTTPS 环境下）→ 浏览器拒绝发送 Cookie，即使 credentials: 'include' 已设置。

简单验证是否生效

可在浏览器开发者工具 Network 标签页中检查：

查看请求的 Request Headers 是否含 Cookie 字段；
确认是否有 OPTIONS 请求（若有，点开看响应头是否完整）；
主请求的响应头中是否有 Access-Control-Allow-Credentials: true 和合法的 Access-Control-Allow-Origin；
若仍失败，复制请求 URL 到 curl 命令中模拟（绕过浏览器 CORS），判断是前端配置问题还是后端逻辑/权限问题。