Express+Next.js+MongoDB应用登录报404错误及配置问题咨询

• 技术栈为Express + Next.js + MongoDB，用户注册接口运行正常，通过POSTMAN直接调用登录接口也可以正常返回响应
• 访问http://localhost:5000/signin页面时，提交登录表单后，浏览器控制台抛出未捕获Promise异常：

  Uncaught (in promise) Error: Request failed with status code 404
      at createError (webpack-internal:///../../node_modules/axios/lib/core/createError.js:16)
      at settle (webpack-internal:///../../node_modules/axios/lib/core/settle.js:17)
  

• 后端服务的路由挂载配置为app.use('/api/v1/auth', auth)
• 终端打印的关联日志为：GET /__nextjs_original-stack-frame?isServerSide=false&file=webpack-internal%3A%2F%2F%2F..%2F..%

关于.babelrc配置修改 #

• 你当前的配置"presets": ["next/babel"]是Next.js官方规定的标准配置，针对当前的404问题不需要新增任何插件。Next.js 12及以上版本默认内置了完整的Babel编译规则，甚至可以不保留.babelrc文件，手动添加多余插件反而可能引发编译冲突。
• 只有需要自定义编译规则（比如配置路径别名、实验性装饰器语法等）时才需要修改该文件，当前场景下该文件和登录404问题没有任何关联。

日志中isServerSide=false的含义 #

• 这条日志不是你的业务请求产生的，是Next.js开发模式的内置调试接口：当客户端代码抛出异常时，Next.js开发服务器会自动发起/__nextjs_original-stack-frame请求，用来拉取原始错误堆栈，在浏览器的开发错误浮层中展示详情。
• 其中isServerSide=false的标识，意思是当前触发的错误是客户端浏览器运行时抛出的，不是服务端SSR渲染阶段抛出的——这条日志只是异常发生后的附带产物，不是404的诱因。

登录请求抛出404的根本原因 #

• 核心问题是请求路径拼接错误，和后端路由配置、Babel配置完全无关：
  1. 首先核对项目中config文件导出的API常量值：常规项目配置里这个常量应该是Express后端的基础访问地址（比如http://localhost:8000）。如果配置时误把API值设为了包含/api/v1/auth的前缀，拼接${API}/api/v1/auth/signin后就会生成类似http://localhost:8000/api/v1/auth/api/v1/auth/signin的无效路径，后端路由匹配不到自然返回404。你可以对照注册功能的请求代码做验证：如果注册请求可以正常打通，说明当前登录请求的路径拼接一定存在不一致的地方。
  2. 结合你访问页面的端口是5000（Next.js前端端口），如果API常量没有配置后端的独立端口，反而留空或者填了前端地址，请求会被直接发到5000端口的Next.js服务上——而Next.js本身没有注册/api/v1/auth/signin的接口路由，就会返回404。这也完全解释了为什么POSTMAN测试接口正常：POSTMAN是直接请求的正确后端端口地址，没有走前端的错误拼接逻辑。
• 额外的代码隐患：handleSubmit里的axios请求没有加try/catch异常捕获，所以404抛出的错误会成为未捕获的Promise异常，直接打印在浏览器控制台。

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