调用Clarifai人脸检测API时触发fetch()函数400错误求助

核心问题排查与修复 #

你的代码里有两个关键问题导致400错误：

1. 错误使用no-cors模式
   mode: 'no-cors'会强制浏览器发起受限跨域请求，此时自定义请求头、JSON格式请求体都会被浏览器忽略，服务器返回的真实错误信息也会被隐藏。直接删除该配置项即可，Clarifai API支持CORS，无需开启此模式。

2. 缺少Content-Type请求头
   你发送的是JSON格式请求体，但未设置Content-Type: application/json头，服务器无法正确解析请求内容，这是触发400错误的直接原因。需要在请求头中添加该字段。

修改后的关键代码片段 #

const returnClarifyRequestOptions = (imageURL) => {
  const PAT = '你的真实PAT';
  const USER_ID = '你的真实用户ID';
  const APP_ID = '你的真实应用ID';
  const IMAGE_URL = imageURL;

  const raw = JSON.stringify({
    "user_app_id": {
      "user_id": USER_ID,
      "app_id": APP_ID
    },
    "inputs": [
      {
        "data": {
          "image": {
            "url": IMAGE_URL
          }
        }
      }
    ]
  });

  const requestOptions = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json', // 添加该请求头
      'Authorization': 'Key ' + PAT
    },
    body: raw
  };

  return requestOptions;
}

额外排查点 #

• 确保输入的图片URL是公开可访问的，无防盗链限制（不能是本地文件路径或需登录查看的图片）。
• 确认PAT、USER_ID、APP_ID完全正确，注意大小写和特殊字符，避免复制时出现空格或字符缺失。
• 可使用Postman直接调用API测试，排除前端代码干扰，验证API本身是否能正常返回结果。

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