获取 API 返回空字符串

Question

我正在尝试使用 fetch API 获取页面的 HTML。这是我的代码。

 var quizUrl = 'http://www.lipsum.com/';
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/html');
fetch(quizUrl,{
    mode: 'no-cors',
    method: 'get',
    headers: myHeaders
}).then(function(response) {
    response.text().then(function(text) {
        console.log(text);
    })
}).catch(function(err) {
  console.log(err)
});

它返回空字符串。任何猜测为什么它不起作用？

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

Answer 1

关于 Request.mode 'no-cors'（来自 MDN，强调我的）

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

所以这将启用请求，但会使响应为 opaque ，即，除了知道目标在那里之外，您将无法从中得到任何东西。

由于您正在尝试获取跨源域，因此除了代理路由之外别无他法。

---

PS：这是一个片段，向您展示请求确实是不透明的：

 var quizUrl = 'http://www.lipsum.com/';
fetch(quizUrl, {
  mode: 'no-cors',
  method: 'get'
}).then(function(response) {
  console.log(response.type)
}).catch(function(err) {
  console.log(err) // this won't trigger because there is no actual error
});

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

Answer 2

我想这可能会有所帮助，请按以下方式使用：

 fetch('/url/to/server')
.then(res => {
    return res.text();
})
.then(data => {
    $('#container').html(data);
});

并且在服务器端，以纯文本形式返回内容而不设置标题内容类型。

我使用 $('#container') 来表示您希望 html 数据在检索后进入的容器。

获取 json 数据的不同之处在于使用 res.json() 代替 res.text() 而且，不要附加任何标头

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