Express+Passport项目GET请求偶尔成功多数返回404是什么原因？

问题根因 #

1. 前端请求触发逻辑错误：你将fetch直接写在组件函数体中，每次组件渲染都会发起请求，叠加React 18开发环境严格模式的双挂载机制，会短时间内产生大量重复请求，极易引发路由匹配异常或者竞态问题。
2. 大概率存在端口/路由前缀匹配问题：你当前请求地址为http://localhost:3000/user，如果前端React开发服务和后端服务都使用3000端口会产生冲突，或者后端路由挂载了前缀未加到请求地址中，就会出现偶尔匹配成功、大部分返回404的情况。
3. 多余的无效配置：fetch本身不支持withCredentials参数，该参数是Axios专属配置，不会影响运行但属于冗余代码。

解决方案 #

1. 修复前端请求逻辑 #

将请求移入useEffect钩子，仅在组件挂载时触发一次：

import React, { useEffect } from "react";

function UserProfile() {
  useEffect(() => {
    fetch("http://localhost:<替换为你的后端实际端口>/user", {
      method: "GET",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  }, [])

  return <h1>Hello</h1>;
}

export default UserProfile;

2. 确认后端路由配置 #

检查app.js中路由挂载的代码，如果你将路由挂载了前缀，例如：

const indexRouter = require('./routes/index')
// 路由挂载了/api前缀
app.use('/api', indexRouter)

则前端请求地址需要对应改为http://localhost:<后端端口>/api/user。

3. 确认后端中间件顺序 #

检查app.js的中间件加载顺序，必须按照「session配置 → passport初始化 → 路由挂载」的顺序排列，错误的顺序会导致身份验证异常：

// 先配置session中间件
app.use(session({
  secret: "你的session密钥",
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false } // 开发环境需设为false
}))
// 再初始化passport
app.use(passport.initialize());
app.use(passport.session());
// 最后挂载路由
app.use('/', indexRouter)

4. 新增404日志排查（可选） #

在所有路由的最后新增全局404处理中间件，可直观看到404请求的实际路径和方法：

app.use((req, res) => {
  console.log('404请求：', req.method, req.path)
  res.status(404).json({ msg: "路由不存在" })
})

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