Node.js/Express中正确编写app.get()接口的技术求助

嘿，你的问题核心出在同一个路由里多次发送响应了——Express里一个请求只能对应一次响应，你现在在/users/路由里先调用res.json(users)，又调用res.sendFile(filePath)，这会导致Express优先发送JSON数据，后面的页面文件根本不会被正常返回，前端自然就拿到JSON替换了页面内容。

正确的做法：分开页面路由和API路由 #

没错，你需要把返回页面和返回JSON数据的逻辑拆成两个独立的路由，而且最好给API路由加个统一前缀（比如/api），避免和页面路由混淆。下面是修改后的完整server.js示例：

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 配置body-parser中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 模拟用户数据
let users = [{ name: 'user1' }];

// 1. API路由：专门返回users的JSON数据
app.get('/api/users', (req, res) => {
  res.json(users); // 这里只发送JSON响应
});

// 2. 托管前端静态资源（比如build目录里的CSS、JS、图片等）
app.use(express.static(path.join(__dirname, 'build')));

// 3. 页面路由：所有非API的请求都返回前端index.html（适配单页应用）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

前端代码对应的调整 #

你的getAll函数需要调用新的API路由，也就是把请求地址改成/api/users：

getAll('/api/users')
  .then(data => console.log('用户数据:', data))
  .catch(error => console.error('请求失败:', error));

关键知识点解释 #

1. 响应只能发送一次：Express中res.json()、res.send()、res.sendFile()这些方法都会结束当前请求的响应流程，一旦调用，后续的响应方法都会被忽略。
2. 静态资源托管：用express.static可以让Express直接返回build目录里的静态文件，不用手动写路由处理每个文件。
3. 单页应用路由适配：用app.get('*')可以捕获所有未匹配到API路由的请求，返回index.html，这样用户刷新页面或者直接访问子路由时不会出现404。

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