React中使用Bearer令牌调用API获取数据时遇404错误求助

嘿，我来帮你排查这个API调用的404问题！先拆解下你代码里的几个关键问题：

问题分析 #

• 多余的认证头：jsonplaceholder.typicode.com是完全公开的测试API，不需要任何Bearer令牌认证，你添加的Authorization: "Bearer XXXXXXXXXXXXXXXXXXXXX"不仅没必要，甚至可能干扰请求的正常发送。
• mode: 'no-cors'的坑：这个模式会让浏览器发起"不透明"请求——即使API返回了错误（比如404），你也无法获取详细的错误信息，甚至会掩盖真实的问题根源。而且这个模式仅适用于不需要读取响应的资源请求，完全不符合你获取用户数据的需求。
• 代码不完整：你的fetch调用缺少后续的.then()和.catch()处理，既没法解析响应数据、更新组件状态，也没法捕获请求过程中的错误。

修正后的完整代码 #

componentDidMount() {
  this.setState({ loading: true });
  fetch('https://jsonplaceholder.typicode.com/users', {
    headers: new Headers({
      "Content-Type": "application/json"
    }),
    method: "GET"
  })
  .then(response => {
    // 先检查响应状态是否正常
    if (!response.ok) {
      throw new Error(`请求失败！状态码: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // 请求成功，更新状态并处理数据
    this.setState({ loading: false, users: data });
    console.log('获取到用户数据:', data);
  })
  .catch(error => {
    // 捕获并处理错误
    this.setState({ loading: false, error: error.message });
    console.error('请求出错:', error);
  });
}

额外排查提示 #

1. 先直接在浏览器地址栏访问https://jsonplaceholder.typicode.com/users，确认这个测试接口本身是正常可用的（正常会返回用户列表JSON）。
2. 如果是你自己的私有API需要认证，要确保令牌有效、API地址完全正确；但针对这个公开测试接口，完全不需要认证头。
3. 始终保留错误捕获逻辑，这样能快速定位请求中的各类问题，比如地址拼写错误、跨域问题等。

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