fetch（）输入意外结束

问题描述

我正在使用fetch（）从api服务器获取数据。我的错误如下所示：

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

推荐答案

不透明响应

对跨域资源的无要求请求的响应具有。如果您在尝试将响应转换为JSON之前记录了响应，则会看到一种不透明的类型。

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".

不透明类型是，如在whatwg.org上的获取说明中所述。

Opaque types are listed as "severely restricted" as explained in the fetch spech on whatwg.org.

当类型不透明时，如。

一个不透明的响应是针对不同来源的资源请求，该资源不返回CORS标头。由于响应不透明，我们将无法读取返回的数据或查看请求的状态，这意味着我们无法检查请求是否成功。使用当前的fetch（）实现，无法请求与窗口全局范围不同来源的资源。

启用CORS支持

最可能解决此问题的方法是在服务器上启用CORS请求支持。这可以取决于环境或取决于语言。例如，您可以通过更改服务器配置来在Nginx的环境中更改CORS设置，也可以在应用程序代码（例如PHP）中指定标头。

Enable CORS support

The most likely solution to your problem is to enable CORS request support on your server. This can be environment dependant or language dependant. 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.

我强烈建议阅读。

PHP中的示例：

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

这篇关于fetch（）输入意外结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！