React中fetch发送POST请求返回415 自定义Content-Type不生效

Content-Type配置不生效、接口返回415状态码的核心诱因是fetch请求中添加了mode: "no-cors"配置。
浏览器对no-cors模式的请求有强制限制：仅允许发送CORS安全列表范围内的请求头，Content-Type: application/json不属于安全列表范畴，会被浏览器自动覆盖为text/plain。后端收到请求后，发现请求携带的内容格式标识和预期的JSON格式不匹配，直接返回415 Unsupported Media Type错误。
Postman不受浏览器同源策略约束，不会篡改手动设置的请求头，因此相同参数在Postman中可以正常请求成功。

• 移除fetch配置中的mode: "no-cors"字段。no-cors模式本身不是跨域解决方案，该模式下除了请求头会被限制，前端也无法读取接口返回的正常响应内容，只能拿到不可读的opaque类型响应。
• 本地开发阶段如果移除配置后出现跨域报错，需要在后端服务侧配置CORS规则，允许React应用的本地访问源（通常为http://localhost:3000或对应本地服务端口），同时将Content-Type加入允许的请求头列表。

修正后的参考代码：

fetch("http://localhost:8080/v1/useranswers", {
  method: "POST",
  headers: {
    Accept: "*/*",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data.data),
}).then(function (response) {
  // 根据接口返回格式按需解析，例如返回JSON格式可调用 response.json()
  return response;
});

请求头参考截图：

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