fetch 给出一个空的响应主体

Question

我有一个 react/redux 应用程序，我正在尝试对服务器执行一个简单的 GET 请求：

 fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.body); // null
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

问题是响应主体在 .then() 函数中是空的，我不确定为什么。我在线检查了示例，看起来我的代码应该可以工作，所以我显然在这里遗漏了一些东西。问题是，如果我检查 Chrome 开发工具中的网络选项卡，就会发出请求并且我会收到我正在寻找的数据。

任何人都可以照亮这个吗？

编辑：

我尝试转换响应。

使用 .text() ：

 fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.text())
.then((response) => {
  console.log(response); // returns empty string
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

和 .json() ：

 fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.json())
.then((response) => {
  console.log(response.body);
  return dispatch({
    type: "GET_CALL",
    response: response.body
  });
})
.catch(error => { console.log('request failed', error); }); // Syntax error: unexpected end of input

查看 chrome 开发工具：

原文由 Razvan Ilin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚遇到这个。正如这个 答案 中提到的，使用 mode: "no-cors" 会给你一个 opaque response ，它似乎不会在正文中返回数据。

不透明：对跨源资源的“no-cors”请求的响应。 严格限制。

就我而言，我使用的是 Express 。在我 为 Express 安装 cors 并配置它并删除 mode: "no-cors" 之后，我得到了承诺。响应数据将在承诺中，例如

fetch('http://example.com/api/node', {
  // mode: 'no-cors',
  method: 'GET',
  headers: {
    Accept: 'application/json',
  },
},
).then(response => {
  if (response.ok) {
    response.json().then(json => {
      console.log(json);
    });
  }
});

原文由 RationalDev likes GoFundMonica 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您需要将 response 转换为 json 才能访问 response.body

从 文档

fetch(url)
  .then(response => response.json())
  .then(json => {
    console.log('parsed json', json) // access json.body here
  })

原文由 Naisheel Verdhan 发布，翻译遵循 CC BY-SA 3.0 许可协议