实现包罗万象的快速路由解决方案后获取 API 调用失败：位置 0 处 JSON 中的意外令牌 <答案

【问题标题】：Fetch API calls fail after implementing catch-all express routing solution: Unexpected token < in JSON at position 0实现包罗万象的快速路由解决方案后获取 API 调用失败：位置 0 处 JSON 中的意外令牌 <
【发布时间】：2018-11-16 12:51:19
【问题描述】：

我正在开发一个 React 项目，在遇到此处描述的问题后：React-router urls don't work when refreshing or writting manually 我实施了该链接中建议的“Catch-All”解决方案。

app.use("/", express.Router());
app.get("*", function (req, res) {
    res.sendFile(path.resolve(__dirname + "/../build/index.html"));
});

这解决了我令人耳目一新的问题，但它破坏了我所有的fetch 呼叫。例如：

fetch("http://localhost:3000/api/login", {
    method: "GET",
    headers: {
        "username": user.value,
        "password": pass.value,
    }
})
    .then(response => response.json())
    .then(function(data) {
        console.log(data)
    })

如果我注释掉上面的 app.use 和 app.get 行，这会很好，这会给我一个错误：

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

我认为 response.json() 返回的承诺被拒绝，基于我所做的一些 console.log 调试。但是，无论我是否注释掉这些行，response 似乎都是一样的。所以我不确定它为什么会失败。

【问题讨论】：

您的回复实际上是一个 html 文件吗？如果它是 html，你为什么要把它读成 json？
您的服务器正在返回一个 HTML 文件（以 < 作为其第一个字符（位置 0）开始），但您的客户端代码需要 JSON。它试图将 HTML 解析为 JSON，因此出现错误。
可能是这个的副本：stackoverflow.com/questions/37269808/…

标签： javascript node.js reactjs express fetch

【解决方案1】：

在以下行中，您将空路由器附加到/ 路由。

app.use("/", express.Router());

因此，当您的客户点击/api/login 时，它无法匹配任何路由。因此，它由发送html 文件的* 处理。

由于/api/login 正在返回带有200 消息的html 文件，fetch 尝试对html 响应进行json 解析。因此，fetch 会引发错误。

解决方案：

app.use("/", // valid router);

【讨论】：