mode: "cors" 且 credentials: "include" 是跨域带凭证请求的必要组合,要求服务端返回 access-control-allow-credentials: true 和非通配符的 access-control-allow-origin;mode: "no-cors" 下响应为 opaque,无法读取;mode: "same-origin" 禁止跨域。

Fetch处理跨域请求时,mode 和 credentials 是两个关键配置项,它们共同决定浏览器是否允许跨域请求、是否携带身份凭证(如 Cookie),以及响应能否被脚本读取。
mode: 控制请求的跨域策略和响应可读性
mode 指定请求的模式,影响浏览器对跨域行为的处理方式。常用值有 "cors"、"no-cors" 和 "same-origin":
-
"cors":默认推荐值。允许跨域请求,但要求服务端返回合法的 CORS 响应头(如
Access-Control-Allow-Origin)。只有响应头满足条件,JavaScript 才能读取响应体。 -
"no-cors":仅允许“简单请求”(GET/HEAD/POST + 纯文本 Content-Type),且响应类型固定为
opaque—— 浏览器会屏蔽响应内容,JS 无法读取 status、headers 或 body。适用于不需读响应的场景(如埋点上报)。 - "same-origin":禁止跨域,请求只在同源下发出;若跨域会直接报错,不发网络请求。
credentials: 决定是否携带身份凭证
credentials 控制 Cookie、HTTP 认证头等凭据是否随请求发送,有三个可选值:"include"、"same-origin"、"omit":
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
-
"include":始终发送凭证,即使跨域。此时服务端必须明确返回
Access-Control-Allow-Credentials: true,否则浏览器拒绝响应(即使 HTTP 状态码是 200)。 - "same-origin":默认值。仅在同源请求时发送凭证;跨域时不带 Cookie 或 Authorization 头。
- "omit":从不发送凭证,忽略所有身份信息。
mode 和 credentials 必须配合使用
两者不是独立生效的,错误组合会导致请求失败或行为不符合预期:
- 跨域请求想带 Cookie,必须同时设置
mode: "cors"和credentials: "include",且服务端响应头要包含Access-Control-Allow-Credentials: true和具体的Access-Control-Allow-Origin(不能是*)。 - 若设
mode: "no-cors",则credentials只能是"omit"或"same-origin"(实际效果等同于"omit"),因为"no-cors"请求不允许携带凭证。 - 设
mode: "same-origin"时,credentials行为由同源规则自然决定,跨域请求根本不会发起。
常见错误与调试建议
遇到跨域请求失败时,优先检查这几项:
- 控制台是否报 “CORS header ‘Access-Control-Allow-Origin’ missing” 或 “The value of the ‘Access-Control-Allow-Origin’ header must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’”?—— 这说明服务端未正确配置响应头。
- Network 面板中看 Request Headers 是否含
Cookie,Response Headers 是否含Access-Control-Allow-Credentials: true和非通配符的Access-Control-Allow-Origin。 - 确认 fetch 调用中没有遗漏
mode或credentials配置(尤其credentials: "include"容易被忘记)。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










