快速路由/索引.js在我的 React 应用程序中不起作用

Question

我正在尝试从 Express.js 中的索引中获取我的 React 应用程序中的 json 对象，但是当它加载时，我得到"未处理的拒绝(语法错误(：JSON 中位置 0 处的意外标记 P"。

当我使用/users.js 作为路由时，我成功获取。

(index.js)
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
vitamins: [
{
name: "Vitamin B2"
}
],
minerals: [
{
name: "Zinc"
}
]});
});

(React app)
componentDidMount() {
fetch('/index')
.then(res => res.json())
.then(micros => {
this.setState({
micros: micros.vitamins
});
})
}

同样，当我使用相同的代码从/users 获取时.js它工作正常。相反，我只是做了 fetch('/users'(。我也尝试只做 fetch('/'(，但我只是在位置 0 的 JSON 中得到"意外的令牌<"。

Answer 1

错误，JSON 中位置 0 的意外令牌<，是因为您的响应不是真正的 json，而是 HTML，类似于 404 html 响应或 500 响应。 建议不要使用"/"进行直接服务器调用。这主要用于加载通常返回 HTML 的整个应用程序。 你应该为端点维护单独的映射，就像你提到的"用户"一样，然后从 React fetch 调用它。 在第一次获得响应时放置一些额外的控制台日志或调试，您将能够找出服务器返回的实际响应

Answer 2

我认为你需要做：

fetch('/')

不

fetch('/index')

在你的 React 代码中。