After getting asked about how to make an XHR for push notifications from service worker, I realised I had never attempted to view the contents of a fetch request, so did a little mucking around and put together a few examples (largely for my own peace of mind).

We start by checking the response status is 200 before examining the text of the response (assuming the response is text). Because the response of a fetch request is a stream, the text() method consumes the stream, hence the promise.

If you run this from any page that isn't on the origin 'https://gauntface.com', then an error will be thrown, "Failed to fetch".

TypeError: Failed to fetch

This is hands down, one of the worst error messages I've ever seen.

What does "TypeError" mean?
Why did it fail to fetch?
Why do you hate me?
TELL ME!?!?!?

cough

What this is "trying" to drive at, is that the requested asset is not on the same origin as the site that's requested it and the server isn't returning the CORs headers.

You can overcome this issue by setting the mode of the request to no-cors. This basically tell's the browser that it's still ok to get the asset despite the server not supporting CORs, however, the response type will be opaque for these responses, meaning you won't be able to examine the response, resulting in no idea of the status or the content of the response.

fetch('https://gauntface.com',{'mode':'no-cors'}).then(function(response){if(response.type ==='opaque'){
console.log('Received a response, but it\'s opaque so can\'t examine it');// Do something with the response (i.e. cache it for offline support)return;}if(response.status !==200){
console.log('Looks like there was a problem. Status Code: ' response.status);return;}// Examine the text in the response
response.text().then(function(responseText){
console.log(responseText);});}).catch(function(err){
console.log('Fetch Error :-S', err);});

If you do have CORs enabled, it acts pretty similar to a basic response on your origin, except the type is cors and the headers you can access through the response is limited. You can check the headers with something along the lines of: