JavaScript Fetch API 中怎么在请求头中设置内容类型-js教程-PHP中文网

设置content-type需显式通过headers传入且与数据格式一致：json用'application/json'并json.stringify；表单用'application/x-www-form-urlencoded'配urlsearchparams；formdata上传文件时切勿手动设，浏览器自动生成multipart头。

javascript fetch api 中怎么在请求头中设置内容类型

在使用 JavaScript Fetch API 发送请求时，设置 Content-Type 请求头的关键是：**通过 headers 选项显式传入，并确保与你发送的数据格式一致**。尤其要注意，浏览器对某些内容类型（如 application/json）会自动添加 Content-Type，但并非所有情况都如此；手动设置更可靠、更可控。

发送 JSON 数据时设置 Content-Type

这是最常见场景。需将数据序列化为 JSON 字符串，并明确指定 Content-Type: application/json：

用 JSON.stringify() 转换数据对象
在 headers 中添加 'Content-Type': 'application/json'
注意：不要让后端误判为表单数据或纯文本

示例：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'alice', password: '123' })
});

发送表单数据（URL-encoded）时的写法

如果提交的是传统表单键值对（类似 form.submit()），应使用 application/x-www-form-urlencoded：

用 URLSearchParams 构造请求体，它会自动编码
必须手动设置 'Content-Type': 'application/x-www-form-urlencoded'
不设或设错会导致后端收不到字段（尤其是 Express、PHP 等依赖此头解析的框架）

示例：

const formData = new URLSearchParams();
formData.append('email', 'user@example.com');
formData.append('age', '25');

fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: formData
});

上传文件（FormData）时不需要手动设 Content-Type

当使用 FormData 对象（例如含 <input type="file">）时，切勿手动设置 Content-Type：

浏览器会自动生成带随机 boundary 的 multipart/form-data 头
手动设置会覆盖该头，导致服务端无法解析文件字段
只需传入 FormData 实例，其他交给浏览器

正确写法：

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('bio', 'Hello world');

fetch('/api/upload', {
method: 'POST',
body: form // 不要加 headers.Content-Type！
});