我最近开始学习 React,我正在尝试创建一个应用程序,该应用程序使用我使用 Express 创建的 API。
目前我在本地托管我的 Express API http://localhost:3000/api
但是,当我打开 postman 或浏览器并向 http://localhost:3000/api/tasks 发送 GET 请求时正如预期的那样,我获得了 API 上的所有任务。
我的 react 应用程序如下所示
class App extends React.Component{
constructor(){
super()
this.state = {
tasks: {}
}
}
...
componentDidMount() {
this.setState({loading: true})
fetch("http://localhost:3000/api/tasks/1")
.then(response => response.json())
.then(data => {
this.setState({
tasks: data
})
})
}
...
render() {
return(
<div>
<p>{this.state.tasks.id}</p>
</div>
}
}
当我在浏览器中打开“开发”选项卡时,我可以看到请求(代码:304)已发送,并且有一个响应,该响应是一个包含我需要的对象的 json 文件。尽管如此,我无法显示从 API 获取的数据。
最佳答案
问题是 CORS 未启用!添加后:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
对于 Express API 的 index.js 文件,我能够从 API 获取数据并将其显示到 React 应用程序。
关于node.js - 如何从 Express API 获取数据并将其显示到 React 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60425501/