javascript - 反应 API 获取失败
问题描述
我正在尝试创建一个站点,我将在其中使用 web-api 并在站点上显示“用户”。我有一个 API 密钥,我必须将其作为“x-api-key”放入标题中。
这是我目前的代码:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoaded: false,
items: []
}
}
componentDidMount() {
const myHeaders = new Headers();
myHeaders.append('x-api-key', 'KEY_HERE');
myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
myHeaders.append('cache-control', 'no-cache')
fetch('URL_HERE', {
method: 'GET',
headers: myHeaders,
async: true,
})
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
items: json,
})
});
}
render() {
var{isLoaded, items} = this.state;
if(!isLoaded) {
return <div>Loading...</div>;
}
else{
return (
<div className="App">
<ul>
{items.map(item => (
<li key={item.id}>
Name: {item.name} | Id:{item.id}
</li>
))};
</ul>
</div>
);
}
}
}
导出默认应用程序;
问题是我在控制台中收到这些错误消息:
加载http://URL/users失败:预检响应没有 HTTP ok 状态。
Uncaught (in promise) TypeError: Failed to fetch
当我尝试在 Postman 中进行 GET 调用时,我成功了。所以我想问题是 api-key 没有在标题中正确实现。
感谢您的帮助,如果您还有什么需要知道的,请告诉我!
解决方案
您需要从代码中删除以下行,之后,您需要从服务器端处理 OPTIONS 方法。
myHeaders.append('cache-control', 'no-cache')
您收到此错误是因为您正在添加带有“x-api-key”的标头。您使请求变得复杂。这需要浏览器发出预检 OPTIONS 请求以请求发送复杂请求的权限。
您向其发出请求的服务器正在响应该 URL 不允许 OPTIONS 请求
您将需要修改服务器并正确处理 OPTION 方法,以便它正确响应预检 CORS 请求。
您没有在邮递员中收到此错误,因为邮递员不需要发出预检请求。
推荐阅读
- android - 当 uid 更改时,为用户订阅 Firebase 中的主题
- python - 重新排序多索引 Pandas 数据框
- reactjs - 访问 React 组件底层 DOM 树
- javascript - 使用 fetch.catch 时在控制台中出现错误
- java - 过滤后的android ListView重复项
- .net-core - 在 dotnet 2.x 版本中使用 include 和 orderby 会引发 Null 异常
- python - Pyspark - 涉及最后一天的“递归”函数
- unity3d - 如果启用了 Internet,Unity 不会加载项目
- java - 隐藏工厂实现
- linux - 如何将物理地址映射到适合 get_user_pages_fast() 的用户空间虚拟地址?