node.js - 如何从 Express API 获取数据并将其显示到 React 应用程序？

Question

我最近开始学习 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 获取的数据。

Answer 1

问题是 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 应用程序。