要用fetch api发送带自定义content-type的请求，关键在于显式设置headers中content-type并确保body类型匹配：json需stringify、formdata不手动设content-type、非简单类型会触发cors预检。
要用 Fetch API 发送带自定义 Content-Type 的请求，关键在于正确设置 headers 并确保请求体（body）与类型匹配。浏览器会自动添加部分 header，但 Content-Type 必须显式声明，且不能违反 CORS 安全限制。
设置 headers 并指定 Content-Type
在 fetch 的配置对象中使用 headers 字段，传入 Headers 实例或普通对象。注意：不要手动加 Content-Length，浏览器会自动计算。
- 用对象写法（最常用）：
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/vnd.api+json' // 自定义类型
},
body: JSON.stringify({ name: 'Alice' })
});
- 用
Headers构造函数（适合复用或动态修改）：
const headers = new Headers();
headers.set('Content-Type', 'text/csv; charset=utf-8');
fetch('/upload', {
method: 'PUT',
headers,
body: 'id,name\n1,John'
});
注意 Content-Type 与 body 类型的对应关系
浏览器不会校验你写的 Content-Type 是否和实际 body 一致，但后端通常会依赖它来解析数据。错配会导致解析失败。
-
'application/json'→body必须是字符串（如JSON.stringify(...)） -
'text/plain'或'text/csv'→body可为字符串或Blob -
'application/x-www-form-urlencoded'→body应为 URL 编码字符串（如'name=Alice&age=30'）或URLSearchParams实例 -
'multipart/form-data'→ 不能手动设Content-Type，必须让浏览器自动生成（即把body设为FormData对象，不写 headers 中的Content-Type）
避免预检失败：简单请求 vs 预检请求
不是所有自定义 Content-Type 都会触发 CORS 预检（OPTIONS 请求）。只有满足“简单请求”条件才跳过预检：
- 方法限于
GET、HEAD、POST -
Content-Type仅允许：application/x-www-form-urlencoded、multipart/form-data、text/plain - 其他值（如
application/json、application/vnd.api+json）都会触发预检
这意味着后端必须支持 OPTIONS 方法并正确返回 Access-Control-Allow-Headers（包含你用的 Content-Type），否则请求会被浏览器拦截。
常见错误和绕过方式
如果后端不支持预检或拒绝非标准类型，可考虑以下方式（按推荐度排序）：
- 改用服务端代理：前端请求同域代理接口，由它转发并设置任意
Content-Type - 协商修改后端接受的类型：例如把
application/vnd.api+json改为application/json并在请求头加自定义标识（如X-API-Version: v2） - 用
text/plain+ 自定义解析：把 JSON 当纯文本发，后端手动解析（不推荐，丢失语义和工具链支持）
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
