如何从节点获取数据？

Question

问题：我正在使用 fetch API 向节点发送 get 请求，但出现以下错误

阅读代码中的注释

server.js

const express = require('express');

const app = express();
const bodyParser = require('body-parser');

const notes = [
    {id: 0, title: "Dinner", body: "- Chicken - Rice - Potatos"},
    {id: 1, title: "Dinner", body: "- Chicken - Rice - Potatos"}
];

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', (req, res, next)=>{
    // Sending data!
    res.json(notes);
})

const port = 3001;

app.listen(port, ()=> console.log(`Server started on port ${port}`));

app.js

class App extends Component{
  state = {
    notes: []
  }

  componentDidMount(){
    // Line where I get the error
    fetch('/')
      .then(resp => resp.json())
      .then(data => this.setState({notes: data}))
  };

Answer 1

错误提示解析的字符串不是 JSON。由于我们没有看到客户端的完整设置，我的猜测是您没有请求开发服务器，这就是您收到错误的原因。

要检查这个尝试：

fetch('/').then(res => res.text()).then(text => console.log(text))

这会将响应输出为纯文本，您将看到您是否请求正确的 URL 并获得您期望的 JSON。如果不这样做，只需将绝对 URL（localhost 或 127.0.0.1 或您为服务器配置的任何内容）与 3001 端口一起使用。

Answer 2

server.js 表明它只有一个端点：/

这意味着您的 React 应用程序必须由不同的 HTTP 服务器提供服务。

您说fetch('/')，这是一个相对 URL，所以您从托管 React 应用程序的服务器而不是由 server.js

创建的服务器请求 /

这意味着您可能正在获取引导 React 应用程序的 HTML 文档。这跟踪错误消息，指出/ 的文件以< 开头。

您需要从实际托管它的服务器请求数据：

`fetch('http://localhost:3001/')`

但是，这将是一个跨域请求，因此您还需要 have server.js give permission to the browser 将 JS 从 React 应用程序公开给 JavaScript。由于您使用的是 Express，因此您可以使用 cors module 执行此操作。