javascript - fetch API to get HTML response

Question

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?

question from:https://stackoverflow.com/questions/41921805/fetch-api-to-get-html-response

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