React SPA搭配Node.js Express路由问题：API直接访问显示JSON而非SPA

嘿，我之前做项目时完全碰到过一样的困扰！用户直接在地址栏敲API路径，结果页面全是JSON，体验太差了。咱们核心要解决的就是区分请求是来自浏览器的页面访问，还是前端代码的fetch/ajax调用，然后针对性返回内容。下面给你几个实用的方案：

方案1：通过Accept请求头判断 #

浏览器直接访问页面时，请求头里的Accept会包含text/html；而前端用fetch/ajax调用API时，默认的Accept通常是application/json（除非你手动改了）。我们可以利用这一点来做判断：

步骤： #

1. 确保你的Express代码里，所有API路由都放在返回SPA的代码之前
2. 在API路由之后添加一个全局中间件，处理剩下的请求：

const path = require('path');

// 先定义你的API路由
app.get('/api/users', (req, res) => {
  res.json({ users: [{ id: 1, name: '张三' }] });
});

// 处理其他所有请求
app.use((req, res) => {
  // 判断是否是浏览器要HTML页面
  if (req.accepts('html')) {
    // 返回SPA的index.html，让React路由接管
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
  } else {
    // 如果是API调用但路径不存在，返回JSON格式的404
    res.status(404).json({ error: 'API endpoint not found' });
  }
});

这个方案能解决访问不存在的API路径时的问题，但如果用户直接访问已存在的API路径（比如/api/users），还是会返回JSON。这时候需要方案2来补充。

方案2：用X-Requested-With头区分API调用 #

我们可以和前端约定，所有API请求都带上X-Requested-With: XMLHttpRequest头（这是jQuery ajax默认带的，fetch需要手动加），然后在Express里检查这个头：

前端修改（fetch示例）： #

// 封装一个fetch工具函数，统一加头
async function apiFetch(url, options = {}) {
  const headers = {
    'X-Requested-With': 'XMLHttpRequest',
    ...options.headers
  };
  return fetch(url, { ...options, headers });
}

// 调用API时用这个函数
apiFetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data));

后端修改： #

在所有API路由前加一个中间件，检查请求头：

app.use('/api', (req, res, next) => {
  // 如果是浏览器直接访问（没有约定的头，且接受HTML）
  if (!req.headers['x-requested-with'] && req.accepts('html')) {
    return res.sendFile(path.join(__dirname, 'public', 'index.html'));
  }
  // 是合法的API调用，继续执行后续路由
  next();
});

// 你的API路由
app.get('/api/users', (req, res) => {
  res.json({ users: [{ id: 1, name: '张三' }] });
});

// 最后处理其他所有请求，返回SPA
app.use((req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

这样一来，用户直接在浏览器输入/api/users时，因为没有带X-Requested-With头，就会返回index.html，React路由会渲染对应的页面（如果React里没有这个路由，就显示你写的404页面，比JSON友好太多）。

额外小技巧 #

如果你的React路由已经配置了404页面，那返回index.html后，React会自动渲染404页面，用户体验会非常流畅。

内容的提问来源于stack exchange，提问作者김기현