ExpressJs动态路由与React GET请求交互异常原因排查

1. 核对React端请求路径的参数传递 #

• 先确认React动态路由的参数是否正确拿到并拼接到API请求里。比如用react-router-dom的useParams()获取路由参数，再组装请求URL：

  import { useParams } from 'react-router-dom';
  
  const UserDetail = () => {
    const { id } = useParams();
    // 发起请求时要带上动态参数
    fetch(`/api/users/${id}`)
      .then(res => res.json())
      .then(data => console.log(data));
    // ...
  };
  

• 别硬写死路径，必须保证参数是从路由里动态获取的，不然请求路径会出错。

2. 检查Express API的动态路由配置 #

• 确认Express端的路由是否正确定义了动态参数，比如：

  // 正确的动态参数路由写法
  app.get('/api/users/:userId', (req, res) => {
    const userId = req.params.userId;
    // 这里处理业务逻辑，返回数据
    res.json({ userId });
  });
  

• 注意API的路径前缀（比如/api）要和客户端请求的前缀完全一致，差一个字符都可能导致请求找不到接口。

3. 解决SPA路由刷新导致的请求异常 #

• 如果你用的是BrowserRouter，部署后刷新动态路由页面时，服务器会默认找对应的静态文件，找不到就返回404，这会让API请求也受影响。得在Express端加fallback配置：

  const path = require('path');
  
  // 先托管React打包后的静态文件
  app.use(express.static(path.join(__dirname, 'client/build')));
  
  // 所有非API的请求，都返回React的index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
  

• 这个fallback路由一定要放在所有API路由的后面，不然会把API请求也拦截成返回页面。

4. 查看浏览器网络请求记录找线索 #

• 按F12打开开发者工具，切到Network标签，看看实际发出去的请求URL对不对，状态码是啥：
  • 如果请求根本没发，那大概率是React组件里的请求逻辑没执行（比如条件渲染没满足）；
  • 如果请求发了但返回404，就是路径匹配的问题；
  • 如果返回500，那是API端的逻辑报错，得看Express的日志。

5. 确认CORS配置无遗漏 #

• 虽然你说其他请求正常，但动态路径可能触发CORS的路径匹配问题。确保Express端的CORS中间件是全局启用的：

  const cors = require('cors');
  app.use(cors()); // 允许所有跨域请求
  

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