重装Windows10后Axios调用Express POST接口返回Cannot GET错误怎么办

核心原因 #

最常见的触发原因是Express路由尾部斜杠自动重定向机制：

Express默认关闭strict routing配置，当客户端请求的路径与服务端定义的路径尾部斜杠不匹配时，服务端会返回301/302重定向响应，引导客户端访问路径匹配的地址，而浏览器处理重定向时会自动将POST请求转为GET请求，就会出现你看到的Cannot GET /api/register/报错。

可直接落地的解决方法 #

• 统一前后端路由的尾部斜杠规范
  要么都带斜杠：前端请求地址保持http://localhost:3001/api/register/，后端路由定义也保留/api/register/
  要么都不带斜杠：前端请求地址改为http://localhost:3001/api/register，后端路由定义改为app.post('/api/register', ...)
• （可选）关闭Express的自动重定向行为：在初始化express时添加配置

  const app = express()
  app.set('strict routing', true) // 严格匹配路由尾部斜杠，不匹配直接返回404，不会触发重定向
  

• 排查其他次要可能：
  1. 确认按钮点击事件没有触发默认提交行为：可以在submitForm函数第一行添加e.preventDefault()，哪怕没有显式写form标签也可以添加，避免隐式表单提交触发GET请求
  2. 确认后端服务运行的是当前最新代码：重装系统后有可能你启动的是旧版本的后端代码，修改代码后确认nodemon已经正确热重载，或者手动重启后端服务验证
  3. 用Postman等接口调试工具直接调用POST接口http://localhost:3001/api/register/，确认接口本身可以正常响应，排除后端部署问题
  4. 清理浏览器缓存或者用无痕模式测试：301重定向会被浏览器长期缓存，哪怕你改了后端配置，旧的缓存还会导致请求被重定向，用无痕模式可以快速验证是否是缓存问题

后续避免同类问题的方案 #

• 制定统一的路由命名规范，所有API统一尾部带斜杠或者统一不带，不要混用
• 接口调试时优先用接口调试工具验证接口本身的可用性，再联调前端逻辑
• 可以在express全局添加请求日志中间件，打印每个请求的方法和路径，出现问题时可以快速排查请求是否符合预期：

  app.use((req, res, next) => {
    console.log(`${req.method} ${req.path}`)
    next()
  })
  

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