Question

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

阅读代码注释

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 < / p>

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

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

但是，这将是跨源请求，因此您还需要have server.js give permission to the browser才能将React JS中的JS暴露给JavaScript。由于您使用的是Express，因此可以使用cors module来完成此操作。

如何从节点获取数据？

2 个答案: