Fetch API与Express配合传输JSON对象的问题排查及实现方法

问题定位及修复方案 #

1. 前端核心错误（最高优先级） #

你写的return await res.json是错误写法：res.json是 Fetch API 内置的异步方法，必须加括号调用才能解析响应体为JSON格式，修改后代码如下：

let action = async (i) => {
    // 给res加const声明，避免全局变量污染
    const res = await fetch("/action", {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        method: "POST",
        body: JSON.stringify(i)
    })
    // 这里必须加()调用json方法才能拿到解析后的响应数据
    return await res.json()
}

补充说明：你之前使用这个方法时不需要处理返回值，所以不会触发这个问题，现在需要读取响应数据就必须正确调用解析方法

2. 后端潜在问题调整 #

• 不要同时调用res.json和res.send，两个方法都会结束当前响应，选一个即可，推荐直接用res.json(objectToSend)，Express会自动设置正确的Content-Type响应头，不需要手动序列化JSON
• 确认objectToSend变量已经提前声明，避免变量污染
• 可以在对应分支加一行日志，确认请求已经正确进入逻辑分支：

case 'getinfo':
    console.log('收到getinfo请求，准备返回数据') // 加这行后续可以看服务端控制台有没有输出
    const objectToSend = {"foo": "bar"}
    res.json(objectToSend)
break

你的现有中间件已经注册了bodyParser.json()，可以正常解析POST请求的JSON格式请求体，这部分不需要调整

3. 快速验证流程 #

1. 重启Express服务，触发前端请求
2. 先看服务端控制台有没有输出刚才添加的日志，确认请求正确到达后端、进入对应分支
3. 打开浏览器控制台-网络面板，查看/action接口的响应状态是否为200，响应体是否为{"foo":"bar"}，确认后端返回正常
4. 此时前端就能正常拿到j.foo的值，调用infoModal正常展示

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