fetch() unexpected end of input

I am using fetch() to grab data from api server. My error looks like this:

Uncaught (in promise) SyntaxError: Unexpected end of input at 
  fetch.then.blob.

Can you please tell me what am I doing wrong.

const weatherAPi ='https://www.metaweather.com/api/location/523920';
fetch(weatherAPi, {
  mode: 'no-cors'
}).then(blob => blob.json())
  .then(data => console.log(data))

Answer

Opaque Responses

A response for a no-cors request to a cross-origin resource has a response type of ‘opaque’. If you log the response before trying to turn it to JSON, you will see a type of “opaque”.

Opaque types are listed as “severely restricted” as explained in the fetch spec on whatwg.org.

An opaque filtered response is a filtered response whose type is “opaque”, url list is the empty list, status is 0, status message is the empty byte sequence, header list is empty, body is null, and trailer is empty.

They cannot currently be read when the type is opaque as explained on Google’s docs on the opaque type.

An opaque response is for a request made for a resource on a different origin that doesn’t return CORS headers. With an opaque response, we won’t be able to read the data returned or view the status of the request, meaning we can’t check if the request was successful or not. With the current fetch() implementation, it’s not possible to make requests for resources of a different origin from the window global scope.

Enable CORS support on your server

This can be environment-dependent or language-dependent. For example, you can change CORS settings within Nginx’s environment by changing your server config, or you can specify headers within your application code such as in PHP.

I highly recommend reading the Mozilla documentation on CORS requests and also Access-Control-Allow-Origin.

An example in PHP:

<?php
header("Access-Control-Allow-Origin: *");  // "*" could also be a site such as http://www.example.com