获取API以获取HTML响应

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)
});

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

Answer 1

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

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

我曾经$('#container')代表你想要检索它后的html数据的容器.

与获取JSON数据的差别是使用res.json()代替 res.text() 而且也没有任何附加头

Answer 2

关于_{(来自MDN,强调我的)}Request.mode'no-cors'

防止该方法不是HEAD,GET或POST.如果任何ServiceWorkers拦截这些请求,他们可能不会添加或覆盖除这些之外的任何标头.此外,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
});