Fetch API GET请求调用json()报错Unexpected token < in JSON at position 0

根因定位 #

1. Express路由匹配顺序错误
   Express会按照路由的定义顺序逐个匹配请求，你把生产环境的GET /*通配符路由定义在了GET /api/advice-requests接口的前面，线上环境运行时，请求/api/advice-requests会先命中通配符路由，直接返回前端的index.html文件（内容以<开头），而不是走到对应的API接口，所以JSON解析时抛出Unexpected token < in JSON at position 0错误。
   该问题完全匹配你给出的所有现象特征：

• 本地运行时NODE_ENV默认不为production，不会加载该通配符路由，所以接口正常。
• 线上的POST请求不会匹配到GET类型的通配符路由，所以其他POST接口都可以正常执行。

2. 前后端返回格式不匹配
   就算解决了路由问题，后续也会出现报错：后端getAll接口返回的是[requests, responses]数组格式，但前端代码是按data.requests、data.responses的对象格式取值，二者不匹配。

修复步骤 #

1. 调整服务端路由顺序，将所有API路由的定义放在生产环境通配符路由之前：

// 所有API路由统一定义在前
app.get("/api/advice-requests", adviceRequests.getAll);
// 其余API路由都放在该区域

// 生产环境静态资源、通配符路由放在所有API路由之后
if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../build")));
  app.get("/*", (req, res) => {
    res.sendFile(path.join(__dirname, "../build", "index.html"));
  });
}

2. 统一前后端返回格式，二选一即可：

• 方案一：修改后端返回结构，匹配前端预期
  将adviceRequests.getAll中返回语句修改为：

return res.status(200).send({ requests, responses });

• 方案二：修改前端解析逻辑，适配后端返回的数组
  将前端请求成功后的解析代码修改为：

const [requests, responses] = await responseInfo.json();
setAdviceRequests(requests);
setResponses(responses);

内容的提问来源于stack exchange，提问作者squidslippers