使用Clarifai API调用时遇400错误，请求排查代码问题

核心错误点及修复方案 #

1. 错误使用no-cors模式 #

请求配置里的mode: 'no-cors'是致命问题：

• 浏览器会强制屏蔽API返回的响应内容，无法正常解析JSON
• 自定义请求头（如Authorization）会被浏览器忽略，导致API无法验证身份
• 直接触发400 Bad Request错误

修复：
删除mode: 'no-cors'配置，默认使用cors模式即可，Clarifai API支持跨域请求。

2. onInputChange未更新组件state #

当前onInputChange仅打印输入值，未将用户输入的图片URL存入组件state，导致点击提交时this.state.input为空字符串，传给API的图片URL无效。

修复：
修改onInputChange方法：

onInputChange = (event) => {
  this.setState({ input: event.target.value });
}

3. 请求头缺少Content-Type #

发送JSON格式请求体时，必须告知服务器请求体格式，否则API无法正确解析请求内容。

修复：
在requestOptions的headers中添加'Content-Type': 'application/json'：

headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
  'Authorization': 'Key ' + PAT
},

4. 语法错误：多余的无效代码 #

returnClarifaiRequestOptions函数里的const PAT = 'xxx';your text``存在多余反引号和无效文本，会导致代码报错，中断请求发送流程。

修复：
删除无效内容，替换为真实的PAT：

const PAT = '你的真实Personal Access Token';

5. 未初始化user状态 #

组件state未初始化user字段，但后续代码尝试访问this.state.user.id，会触发Cannot read properties of undefined错误，影响后续逻辑执行。

修复：
在constructor中补充user初始状态：

constructor() {
  super();
  this.state={
    input: '',
    user: { id: '', entries: 0 } // 根据业务需求补充初始值
  }
}

修复后的请求配置示例 #

const returnClarifaiRequestOptions = (imageUrl) => {
  const PAT = '你的真实PAT';
  const USER_ID = 'ekasandiyunan-1975';       
  const APP_ID = 'my-first-application-r4hcl';
  const MODEL_ID = 'face-detection';
  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
}

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