JavaScript 中怎么用 Fetch API 发送自定义请求方法和头信息-js教程-PHP中文网

fetch api 默认使用 get 方法，可通过 method 选项指定 post、put、delete 等方法，并通过 headers 添加自定义请求头；注意 get 不支持 body，json 数据需序列化，跨域需处理预检及 credentials。

javascript 中怎么用 fetch api 发送自定义请求方法和头信息

Fetch API 默认使用 GET 方法，但你可以通过 method 选项指定任意 HTTP 方法（如 POST、PUT、DELETE），并通过 headers 选项添加自定义请求头。

设置请求方法（method）

在 fetch() 的第二个参数（配置对象）中传入 method 字符串即可。注意：大小写不敏感，但惯例用大写。

method: 'POST' —— 提交数据
method: 'PUT' —— 全量更新资源
method: 'PATCH' —— 部分更新资源
method: 'DELETE' —— 删除资源
method: 'HEAD' 或 'OPTIONS' —— 获取元信息或预检

添加自定义请求头（headers）

headers 是一个对象或 Headers 实例，用于设置请求头。常见场景包括：

Gradle 9.8.0

下载

发送 JSON 数据时加 'Content-Type': 'application/json'
携带认证令牌：'Authorization': 'Bearer xxx'
模拟特定客户端：'X-Requested-With': 'XMLHttpRequest'
禁用缓存：'Cache-Control': 'no-cache'

注意：部分头字段（如 Referer、User-Agent、Content-Length）是受保护的，JavaScript 中无法手动设置。

完整示例：POST 请求带 JSON 和认证头

下面是一个典型用法，向 API 提交用户数据并携带 Bearer Token：

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
  },
  body: JSON.stringify({
    name: '张三',
    email: 'zhangsan@example.com'
  })
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));

注意事项和常见问题

GET 请求不能带 body：即使设置了 body，浏览器也会忽略，且可能报错；如需传参，应拼在 URL 后（用 URLSearchParams 构建）
JSON 数据必须序列化：body 只接受字符串、FormData、Blob 等，直接传对象会出错
CORS 预检（OPTIONS）自动触发：当发送非简单请求（如含自定义头或非 GET/POST 方法），浏览器会先发 OPTIONS 请求，后端需正确响应才能继续
credentials 默认不发送 Cookie：如需携带凭证（如登录态 Cookie），要显式加 credentials: 'include'