fetch API to get HTML response

问题

I am trying to get a page's HTML using fetch API. Here is my code.

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

It returns empty string. Any guesses why it doesn't work?

回答1:

About the Request.mode'no-cors' _{(from MDN, emphasis mine)}

Prevents the method from being anything other than HEAD, GET or POST. If any ServiceWorkers intercept these requests, they may not add or override any headers except for these. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.

So this will enable the request, but will make the Response as opaque, i.e, you won't be able to get anything from it, except knowing that the target is there.

Since you are trying to fetch a cross-origin domain, nothing much to do than a proxy routing.

PS : here is a snippet showing you that the request is indeed opaque :

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

回答2:

I guess this might help, use as below:

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

And in server side, return content as plain text without setting header content-type.

I used $('#container') to represent the container that you want the html data to go after retrieving it.

The difference with fetching json data is using res.json() in place of res.text() And also, don't append any headers

来源：https://stackoverflow.com/questions/41921805/fetch-api-to-get-html-response

标签

javascript

fetch-api