Node.js+Express启用静态文件时无法获取JSON数据求助

问题场景 #

学习Node.js + Express向前端静态文件传递数据，简化测试为后端发送用户对象数组的JSON数据，前端通过allScripts.js用fetch请求并打印到控制台。但添加app.use(express.static('public'))后，前端出现报错：

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

移除静态文件中间件后，能正常看到返回的JSON数据。

报错原因 #

Express的中间件是按注册顺序执行的：

• app.use(express.static('public'))会优先匹配根路径/，返回public目录下的index.html文件
• 此时前端fetch('../')请求的根路径拿到的是HTML文本，而非后端准备的JSON数据，用response.json()解析HTML自然会触发语法错误

解决方案 #

给API接口设置独立的路由路径，避免和静态文件的根路径冲突，具体步骤如下：

1. 修改服务器代码，调整API路由 #

将原来的根路径路由改为专门的API路径，比如/api/users：

const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.static('public'));

// 改用/api/users作为数据接口路径
app.get('/api/users', (req,res) => {
    const users = [
        {id:'123', name:'Shaun'},
        {id:'234', name:'Bob'},
        {id:'345', name:'John'},
        {id:'456', name:'Oliver'},
    ]
    res.json(users);
});

app.listen(PORT, () => {
    console.log("Server running on port ", PORT)
});

2. 修改前端fetch请求路径 #

在allScripts.js中，直接请求新的API路径（使用绝对路径更可靠，避免相对路径的层级问题）：

fetch('/api/users')
  .then(response => response.json())
  .then(users => console.log(users));

原理说明 #

修改后，静态文件中间件负责处理/路径（返回index.html），而/api/users路径由后端路由专门处理并返回JSON数据，两者路径不冲突，前端就能正确拿到JSON并解析打印。

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