React中带请求头的Ajax GET请求仍返回401未授权错误求助

我来帮你排查几个导致401错误的常见原因，以及对应的解决办法：

1. 检查授权头的格式是否正确 #

大多数API的Authorization头要求使用Bearer前缀，直接放置API密钥是不被识别的。你需要修改headers的写法：

headers: { 
  Authorization: "Bearer 你的真实API密钥" 
}

注意Bearer和密钥之间有一个空格，记得把你的真实API密钥替换成你从Seamk平台获取的有效密钥。

2. 确认API密钥的有效性 #

• 检查你使用的API密钥是否是在Seamk开放数据平台正确生成的，有没有过期或者权限限制；
• 确认这个密钥是否有权限访问/r1/reservation/building/2这个具体的端点，有些API会对不同的端点分配不同的权限。

3. 验证请求头是否实际发送 #

打开浏览器的开发者工具（F12），切换到Network标签，重新触发请求，查看该请求的Request Headers，确认Authorization字段是否存在且内容正确。有时候Ajax库会因为某些原因（比如跨域配置）自动移除自定义头，这时候需要进一步排查CORS相关的设置。

4. 修复回调函数的this指向问题 #

虽然这不是导致401的原因，但你的代码里success回调用了普通函数，会导致this.setState无法正确执行，建议改成箭头函数来绑定上下文：

success: (data) => {
  this.setState({ todos: data });
}

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