JavaScript Fetch API 中怎么设置请求头和自定义 Headers-js教程-PHP中文网

javascript fetch api 中设置请求头需通过 headers 选项，支持对象字面量或 headers 实例；安全请求头如 content-type、authorization 可自由设置，而 cookie、host 等受浏览器限制不可手动修改；跨域时非简单请求头会触发 options 预检，后端须配置 access-control-allow-headers；受限头字段只能通过服务端代理或 node.js 环境绕过。

javascript fetch api 中怎么设置请求头和自定义 headers

在 JavaScript 的 Fetch API 中设置请求头，主要通过 headers 选项完成，支持对象字面量或 Headers 实例两种方式。关键在于：请求头是否允许自定义，取决于请求类型（如是否跨域）和浏览器的 CORS 策略。

使用对象字面量设置常见请求头

最简单的方式是传入一个普通对象，键名不区分大小写（但建议小写），值为字符串：

fetch('/api/data', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    'authorization': 'Bearer abc123',
    'x-request-id': 'req-789'
  },
  body: JSON.stringify({ name: 'Alice' })
});

注意：Content-Type、Authorization、X-Requested-With 等属于“安全请求头”，可自由设置；但像 Cookie、Host、Connection 这类禁止手动修改的头，即使写了也会被浏览器忽略。

用 Headers 对象实现动态/复用式管理

当需要多次复用、条件添加或运行时修改头信息时，推荐使用 Headers 构造函数：

创建空实例再逐个追加：const headers = new Headers(); headers.append('Accept', 'application/json');
从对象初始化：const headers = new Headers({ 'content-type': 'text/plain' });
检查是否存在：headers.has('authorization')
获取值：headers.get('content-type')
删除某项：headers.delete('x-debug')

然后在 fetch 中直接传入：fetch(url, { headers })。这种方式更灵活，也便于封装请求工具函数。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

处理跨域请求时的注意事项

如果目标接口开启了 CORS，且你设置了非简单请求头（如 Authorization 或自定义头如 X-Trace-ID），浏览器会先发一个 OPTIONS 预检请求。此时后端必须响应正确的 Access-Control-Allow-Headers，否则请求会被拦截。

例如，前端发送了 X-User-ID，后端需返回：
Access-Control-Allow-Headers: X-User-ID, Content-Type, Authorization

另外，若需携带 Cookie，还需同时设置：credentials: 'include'，且后端要返回 Access-Control-Allow-Credentials: true。

常见错误与绕过限制的方法

以下头无法通过 JavaScript 设置（浏览器强制限制）：
Accept-Charset、Accept-Encoding、Access-Control-Request-Headers、Access-Control-Request-Method、Connection、Cookie、Cookie2、Content-Length（除非 method 是 PUT 或 POST 且 body 非空）、Date、DNT、Expect、Host、Keep-Alive、Origin、Referer、TE、Trailer、Transfer-Encoding、Upgrade、User-Agent、Via