为什么 fetch 返回 status = 0 的响应？

Question

我想使用 fetch API 从 URL 获取整个 HTML 文档。

let config = {
method: 'GET',
headers: {
    'Content-Type': 'application/json',
    'Accept': 'text/html',
    'Accept-Language': 'zh-CN',
    'Cache-Control': 'no-cache'
},
mode: 'no-cors'};

fetch('http://www.baidu.com', config).then((res)=> {
console.log(res);}).then((text)=> {});

当我在 chrome 中运行代码时，它会触发一个请求并在 chrome 网络选项卡中返回 html。 但 fetch res 返回：

为什么状态为 0，我怎样才能获得像 chrome 网络中那样的正确资源？

Answer 1

在no-cors的一部分config.mode ：

no-cors — 防止方法不是 HEAD、GET 或 POST。 如果任何 ServiceWorker 拦截了这些请求，他们可能不会添加或覆盖除这些之外的任何标头。 此外，JavaScript 可能无法访问结果响应的任何属性。 这确保了 ServiceWorkers 不会影响 Web 的语义，并防止跨域泄漏数据引起的安全和隐私问题。

实际上，您从发出此类请求（将no-cors指定为模式）获得的响应将不包含有关请求是成功还是失败的信息，从而使状态代码为 0。从fetch调用中删除mode将显示 CORS事实上失败了。

要了解 0 在您的特定情况下的含义，请参阅其他 SO 答案。

Answer 2

我不知道如何在浏览器环境中执行此操作，但我知道可以从Node中的跨源站点fetch 。

require('es6-promise').polyfill();
require('isomorphic-fetch');
fetch('https://www.baidu.com', {
  mode: 'no-cors'
})
  .then((res) => {
    console.log(res.status); //=> 200
  });

因此，您可以使用节点服务器来fetch内容，然后respond您的客户端。

我还想从浏览器中的某些站点fetch ，这似乎是不可能的。 也许真的不可能这样做，因为互联网需要保护那些我们想从中获取资源的网站。