如何用同一Express端点同时提供前端页面与REST接口数据？

你的问题核心是Express路由匹配顺序导致的冲突：当直接访问或刷新/posts这类前端路由路径时，请求会先匹配到后端的/posts API路由，返回接口数据；而前端通过客户端路由跳转时，是在浏览器内用JS完成页面切换，不会发起新的HTTP请求，所以不会触发后端路由匹配。

下面是两种可行的解决方法：

方法一：通过请求头区分页面请求与API请求（无需修改现有路由结构） #

前端页面请求的Accept请求头通常为text/html，而API数据请求的Accept一般是application/json。我们可以利用这一点，在API路由前加一层中间件做判断：

const express = require('express');
const path = require('path'); // 需要引入path模块处理文件路径
const app = express();

// 托管前端静态文件
app.use(express.static('public'));

// 处理/posts路由：根据请求头判断走API还是返回页面
app.use('/posts', (req, res, next) => {
  // 如果是API数据请求（Accept为application/json），继续走API路由
  if (req.get('Accept') === 'application/json') {
    next();
  } else {
    // 否则返回前端入口文件（假设public目录下的index.html是单页入口）
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
  }
}, postRoutes);

// 同理处理/user路由
app.use('/user', (req, res, next) => {
  if (req.get('Accept') === 'application/json') {
    next();
  } else {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
  }
}, userRoutes);

// 兜底处理所有未匹配的GET请求，返回前端入口
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

方法二：给API路由统一加前缀（更直观，避免路由歧义） #

给所有REST接口加上统一前缀（比如/api），让前端路由和API路由完全分离：

后端代码修改： #

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static('public'));
// API路由添加/api前缀
app.use('/api/posts', postRoutes);
app.use('/api/user', userRoutes);

// 所有非API、非静态文件的GET请求，返回前端入口
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

前端代码修改： #

将所有API请求的基础路径改为/api，比如如果用Axios：

axios.defaults.baseURL = '/api';
// 之后请求posts接口就用axios.get('/posts')，实际会请求/api/posts

关键原理说明 #

Express的路由匹配是从上到下顺序执行的，哪个路由先匹配到就会执行对应的逻辑。原来的代码中，app.use('/posts', postRoutes)会优先匹配所有以/posts开头的请求，不管是页面请求还是API请求，所以直接访问/posts会返回接口数据。通过上述两种方法，我们可以把页面请求和API请求区分开，让页面请求返回前端入口文件，由前端客户端路由处理后续的页面逻辑。

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