JavaScript 中怎么在 CORS 请求中配置自定义的请求头字段-js教程-PHP中文网

必须同时配置前后端：前端用fetch显式设置headers并确保mode:'cors'，后端需在options响应中返回access-control-allow-headers包含自定义头。

javascript 中怎么在 cors 请求中配置自定义的请求头字段

在 JavaScript 中发起 CORS 请求时，若需添加自定义请求头（如 X-Auth-Token、X-Request-ID），必须同时满足前端与后端两方面的配置要求，否则浏览器会直接拦截请求或返回 403/0 状态错误。

前端：使用 fetch 或 XMLHttpRequest 显式设置 header

默认情况下，浏览器只允许发送有限的“安全首部字段”（如 Accept、Content-Type、Authorization）。一旦设置了非标准字段（如 X-My-Custom-Header），浏览器会先发一个 预检请求（OPTIONS），确认服务端是否允许该字段。

因此，你需要：

确保使用 fetch 时传入 { headers: {...}, mode: 'cors' }（mode: 'cors' 是默认值，但显式写出更清晰）；
避免在 Content-Type 中使用非简单值（如 application/json 是允许的，但 application/vnd.api+json 会触发预检）；
如果需要带凭证（如 cookies 或 Authorization），还需加上 credentials: 'include'，且后端 Access-Control-Allow-Origin 不能为 *。

示例：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Auth-Token': 'abc123',
    'X-Request-ID': 'req-789'
  },
  credentials: 'include',
  body: JSON.stringify({ msg: 'hello' })
});

后端：必须响应预检请求并声明允许的自定义 header

当浏览器发送 OPTIONS 预检请求时，服务端必须正确响应以下关键 header：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

Access-Control-Allow-Origin：指定允许的源（不能是 *，如果前端带 credentials）；
Access-Control-Allow-Headers：明确列出所有允许的自定义请求头，例如 X-Auth-Token, X-Request-ID；
Access-Control-Allow-Methods：如 GET, POST, PUT, DELETE；
Access-Control-Allow-Credentials：若前端设了 credentials: 'include'，此项必须为 true；
对 OPTIONS 请求，响应体可为空，状态码应为 200 或 204。

常见错误：后端只写了 Access-Control-Allow-Origin: *，却没配 Access-Control-Allow-Headers，导致预检失败，浏览器控制台报错 “Request header field X-Auth-Token is not allowed by Access-Control-Allow-Headers”。