Express中向服务端发起POST请求后控制台无输出如何解决

核心问题1：中间件与路由注册顺序错误 #

Express 会按照代码书写顺序依次注册中间件、路由规则，你在代码中先执行了app.listen()启动服务，之后才注册body-parser、CORS以及路由规则，这些后续注册的规则不会对已经启动的服务生效，这是POST请求无响应、控制台无输出的最主要原因。

核心问题2：POST路由未返回任何响应 #

你在app.post('/addPerson')的处理逻辑中仅做了数据存储和打印，没有给客户端返回任何响应，会导致客户端的fetch请求一直处于 pending 状态，且客户端后续执行response.json()时会抛出解析错误。

修复后的完整代码 #

server.js 调整后代码 #

const Express = require('express'),
      app     = Express(),
      PORT    = process.env.PORT || 5000,
      data    = []

// 优先注册CORS中间件
const cors = require('cors')
app.use(cors())

// 注册body解析中间件（新版Express内置了json和urlencoded解析，也可以直接用Express.json()代替body-parser）
app.use(Express.urlencoded({extended: false}))
app.use(Express.json())

// 注册静态资源中间件
app.use(Express.static('public'))

// 注册路由
// GET请求
app.get('/', (req, res) => {
    res.send('<h1>Home Page</h1>')
})
app.get('/addPerson', (req, res) => {
    res.send('<h1>Hello Hany</h1>')
})

// POST请求
app.post('/addPerson', (req, res) => {
    data.push(req.body)
    console.log(data);
    // 补充返回响应，匹配客户端json解析逻辑
    res.json({
        code: 200,
        msg: '添加成功',
        data: req.body
    })
})

// 所有规则注册完成后再启动服务
app.listen(PORT, () => {
    console.log(`Server is running at port ${PORT}`);
})

客户端app.js无需大改，调整后会正常拿到服务端返回的结果 #

const postData = async ( url = '', data = {})=>{
    console.log('请求参数：',data);
    const response = await fetch(url, {
        method: 'POST', 
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    });

    try {
        const newData = await response.json();
        console.log('服务端返回：',newData);
        return newData;
    }catch(error) {
        console.log("请求错误：", error);
    }
}

postData('/addPerson', {name: 'Mike', age: 30});

验证步骤 #

1. 重启Node服务
2. 刷新页面发起请求，此时服务端控制台会正常打印对应的数据，客户端控制台也会输出请求参数和服务端返回结果。

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