UI调用接口持续出现Unsupported Media Type错误，Postman请求正常求助

核心问题：mode: "no-cors" 限制了请求头的发送 #

你的代码中设置了mode: "no-cors"，这会导致浏览器强制限制请求头只能包含安全的CORS头（比如Accept、Accept-Language等），而你设置的Content-Type: application/json并不在这个安全列表里。这意味着浏览器实际上没有把这个Content-Type头发送给服务器，服务器因此无法识别请求体的格式，返回415 Unsupported Media Type错误。

而Postman不受浏览器的CORS限制，能完整发送你设置的所有请求头，所以请求成功。

具体修复步骤 #

1. 移除mode: "no-cors" #

首先删除代码中的mode: "no-cors"配置，这样浏览器会发送你设置的所有请求头：

const getProducts = async () => {
  try {
    const response = await fetch(
      "https://dcsquare-utilities.chubb.com:472/CentralizedEnvControlAPI/GetProducts",
      {
        method: "post",
        headers: {
          "Content-Type": "application/json",
          "Accept": "*/*",
          "Accept-Encoding": "gzip, deflate, br"
        },
        body: JSON.stringify(body),
      }
    );
    const data = await response.json();
    console.log("G", data);
  } catch (err) {
    console.error(err);
  }
};

2. 处理CORS问题 #

移除no-cors后，你可能会遇到CORS错误（浏览器提示跨域问题）。这时候需要：

• 联系服务器管理员，在服务器端配置Access-Control-Allow-Origin头，允许你的前端域名访问；
• 如果无法修改服务器，可搭建一个代理服务器（比如用Node.js的http-proxy-middleware），让前端请求先发送到代理服务器，再由代理服务器转发到目标接口，绕过浏览器的CORS限制。

3. 匹配Postman的请求头 #

对比Postman的请求头，确保你的代码包含所有服务器需要的必要头（比如Postman中的User-Agent、Host等），有些服务器会校验这些头信息。可以在headers中添加：

headers: {
  "Content-Type": "application/json",
  "Accept": "*/*",
  "Accept-Encoding": "gzip, deflate, br",
  "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36",
  "Host": "dcsquare-utilities.chubb.com:472"
}

额外注意事项 #

• 不要在前端设置Access-Control-Allow-Origin头，这个头是服务器返回给浏览器的，前端设置无效；
• 确保body变量的结构和Postman中发送的请求体完全一致，避免因数据格式问题导致错误。

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