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))
对跨域资源的no-cors请求的响应为response type of 'opaque'.如果在try 将其转换为JSON之前记录响应，您将看到一种类型的"不透明".
Opaque types are listed as "severely restricted" as explained in the fetch spec on whatwg.org.
不透明过滤响应是一种过滤响应，其类型为"不透明"，url列表为空列表，状态为0，状态消息为空字节序列，标题列表为空，正文为空，尾部为空.
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.
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.
我强烈推荐阅读Mozilla documentation on CORS requests和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