Node/Express POST请求出现Failed to fetch错误排查

你代码里有3处明确会触发该报错的问题，按优先级修复即可：

• 第一处：错误的中间件配置直接导致服务端运行崩溃
  你在正确配置express.urlencoded({extended: true})之后，多写了一行app.use(express.urlencoded)。这行代码没有执行函数调用生成合法的中间件处理函数，而是直接把urlencoded工厂函数本身传入中间件链，所有请求到达这一步都会直接抛出运行时异常，服务端不会返回正常HTTP响应，连接直接中断，前端fetch就会报Failed to fetch。直接删除这行多余代码即可。
• 第二处：POST路由语法结构错误
  从你贴出的代码格式看，app.post('/api')的回调闭合符})被写到了代码块外部，会导致JS语法错误、服务启动失败或路由注册失效。请确认实际运行的代码中POST路由结构完整，正确写法如下：

app.post('/api', (req, res) => {
  console.log('I got a req')
  console.log(req.body)
  const data = req.body
  res.json({
    status:'success',
    cart:data.cart
  })
})

• 第三处：路由顺序与请求路径问题
  1. 请把app.get("*")这个通配路由移到所有接口路由的最末尾。Express路由是从上到下匹配的，虽然GET通配不会拦截POST请求，但后续新增GET接口如果写在它后面会被直接拦截，返回index.html内容。
  2. 如果你本地开发时前端跑在独立的开发端口（比如Vite 5173、Webpack 3001），没有通过Express的3000端口直接访问前端页面，那么fetch里写的相对路径/api会请求到前端开发服务的对应地址，而非后端接口。这种情况要么把请求地址改成完整的http://localhost:3000/api（你已配置cors，跨域可正常通行），要么给前端开发服务配置代理把/api请求转发到后端端口。

修正后可运行的后端核心代码 #

const path = require("path")
const express = require("express")
const cors = require('cors')
const app = express()

const publicPath = path.join(__dirname, "..", "client", 'dist')
const publicPath2 = path.join(__dirname, "..", "client", 'public')
const port = process.env.PORT || 3000

app.use(express.urlencoded({extended: true}))
app.use(express.json())
app.use(cors())
app.use(express.static(publicPath))
app.use(express.static(publicPath2))

// 注册POST接口
app.post('/api', (req, res) => {
  console.log('I got a req')
  console.log(req.body)
  const data = req.body
  res.json({
    status:'success',
    cart:data.cart
  })
})

// 通配前端路由放在所有接口之后
app.get("*", (req,res) => {
  res.sendFile(path.join(publicPath, 'index.html'))
})

app.listen(port, () => {
  console.log('server is up')
})

修复后先启动服务，用curl或接口测试工具先调用http://localhost:3000/api确认接口能正常返回，再从前端页面对应端口发起请求即可。

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