调用API接口获取数据遇异常：请求头配置引发的报错问题

问题1：无Content-Type时请求体属性缺失 #

仅使用空Headers对象发起请求时，浏览器不会默认按JSON格式解析请求体，后端无法正确读取你传入的属性，因此返回「请求体属性缺失」的错误。

问题2：添加Content-Type后出现CORS错误 #

从报错图可知，这是**跨域资源共享（CORS）**问题：后端服务器未配置Access-Control-Allow-Origin响应头，不允许你的前端域名发起跨域请求。

解决步骤 #

1. 确保请求体正确序列化 #

添加Content-Type: application/json后，必须将请求体转为JSON字符串，否则后端仍无法解析：

const payload = { /* 你的请求体属性 */ };
const headers = new Headers();
headers.append("Content-Type", "application/json");

fetch('你的API地址', {
  method: 'POST', // 或PUT/PATCH等对应请求方法
  headers: headers,
  body: JSON.stringify(payload) // 关键：将JS对象转为JSON字符串
})

2. 解决CORS错误 #

• 若后端由你维护：在后端配置响应头，允许你的前端域名访问，以Node.js/Express为例：

  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '你的前端域名'); // 生产环境不建议用*允许所有域名
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });
  

• 若后端不由你维护：联系API提供者添加对应CORS配置；本地开发时可通过代理服务器（如Vue/React的devServer代理）绕过跨域限制。

内容的提问来源于stack exchange，提问作者Rohid