如何使用fetch获取自有API通过res.send()返回的响应数据

问题原因 #

fetch返回的Response是HTTP响应的底层抽象对象，不会自动解析响应体内容。你看到的body字段是可读流格式，需要手动调用对应方法解析后才能拿到返回的业务数据，Postman会自动完成响应解析步骤，所以你能直接看到数据，不是你的API实现有问题，只是漏了解析步骤。

解决方法 #

在拿到Response后调用.json()方法解析JSON格式的响应体，同时因为你用到了express session cookie，跨域请求需要额外配置credentials参数保证请求携带cookie：

const response = await fetch("http://localhost:2000/user/login", {
    method: "post",
    headers: { "Content-Type": "application/json" },
    // 跨域请求携带cookie必须加这个配置
    credentials: 'include',
    body: JSON.stringify(user),
  });
// 解析JSON响应体，这一步是你之前遗漏的
const resData = await response.json();
// 这里就能拿到你返回的{data: 1}对象
console.log(resData.data);

额外后端配置注意事项 #

如果是跨域场景，后端express的CORS配置需要做对应调整，否则会报错：

• 不能设置Access-Control-Allow-Origin: *，必须指定明确的前端源地址，比如http://localhost:5173
• 要开启Access-Control-Allow-Credentials: true

最优数据传输方案 #

你当前用的JSON格式就是这类业务场景的最优方案，序列化和解析成本低，前后端生态支持完善，是当前HTTP接口数据传输的行业标准。如果涉及大文件传输再考虑二进制流方案，普通业务接口用JSON完全足够。

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