使用Node.js与Firestore处理请求时客户端无法获取服务端返回数据

问题原因 #

1. 客户端侧：fetch API 执行后返回的是Response对象，仅包含响应状态、头等元信息，不包含实际响应体，需要调用对应的方法解析响应体才能拿到返回数据。
2. 服务端侧存在潜在问题：verifySessionCookie是异步方法，当前你把res.json写在异步逻辑外，会直接跳过身份校验逻辑提前返回响应，后续如果需要在身份校验通过、删除操作完成后返回业务结果，会出现重复发送响应的报错。

修复方案 #

客户端代码修改 #

你需要调用Response.json()方法解析JSON格式的响应体，该方法是异步的，需要额外加一层then处理解析后的结果：

for(var i = 0; i < rewardDeleteButtons.length; i++) {
        var deleteButton = rewardDeleteButtons[i]
        deleteButton.addEventListener('click', function(e) {
            console.log(document.cookie)
            console.log(this.value)
            fetch("/deleteReward/" + this.value, {
                method: "DELETE",
                headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                "CSRF-Token": Cookies.get("XSRF-TOKEN"),
                },
            })
            .then(res => res.json()) // 新增：解析Response对象的JSON响应体
            .then((data) => {
                console.log(data) // 此处即可打印出 {'key': 'value'}
            })
        })
    }

如果服务端返回的是普通文本，可以用res.text()替代res.json()解析响应。

服务端代码优化（可选，规避后续业务迭代出问题） #

如果后续需要等身份校验、删除操作执行完成后再返回对应结果，需要把返回逻辑放到异步回调内，同时异常分支也要返回响应避免请求挂起：

app.delete('/deleteReward/:id', async (req, res) => {
  console.log('\n\n\n\nInside delete\n\n\n\n')
  console.log(req.params.id)

  var rewardId = req.params.id
  const sessionCookie = req.cookies.session || "";

  var idToken = ""
  var type = ""
  if (sessionCookie) {
    idToken = sessionCookie['idToken']
    type = sessionCookie['type']
  }

  console.log("Printing session cookie")
  console.log(sessionCookie)
  try {
    const decodedClaims = await admin.auth().verifySessionCookie(idToken, true /** checkRevoked */)
    console.log(decodedClaims.user_id)
    await deleteReward(decodedClaims.user_id, rewardId)
    // 业务逻辑执行完成后再返回结果
    res.json({'key': 'value'})
  } catch (error) {
    console.log(error)
    // 异常场景也要返回响应
    res.status(500).json({error: '操作失败'})
  }
})

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