javascript - 如何从 window.fetch() 响应中获取数据？

Question

我正在尝试使用 window.fetch() 从服务器获取 json，但无法从响应中获取数据。我有这段代码:

let url =
'https://api.flightstats.com/flex/schedules/rest/v1/json/from/SYD/to/MEL/departing/2016/3/28?appId=f4b1b6c9&appKey=59bd8f0274f2ae88aebd2c1db7794f7f';
let request = new Request (url, {
        method: 'GET',
        mode: 'no-cors'
    });

 fetch(request)
        .then(function(response){
            console.log(response)
        });

看来这个请求是成功的，我看到状态200和网络选项卡中带有 json 的响应正文 - status and response .但是在 console.log 中我没有看到 json 对象 - console log image

我不明白为什么我在 console.log 中看不到 json

Answer 1

您请求的主机站点似乎不支持 CORS。因此，您不能使用 fetch() 发出跨源请求并取回数据。如果，您将 fetch() 请求更改为 mode: 'cors'，调试控制台将显示主机站点不提供 CORS header 以允许浏览器显示你请求的结果。

当您使用 mode: 'no-cors' 时，浏览器会向您隐藏结果(因为您无权查看它)并且您可以看到响应已被标记作为不透明。

在浏览 api.flightstats.com 网站时，我确实看到它支持 JSONP，这将使您能够解决缺少 CORS 支持的问题并成功完成跨源请求。

为了简单地展示它可以工作，我使用 jQuery 来证明可以发出 JSONP 请求。这是工作片段中的代码。请注意，我在 jQuery 请求中将 URL 从 /json/ 更改为 /jsonp/ 和特定的 dataType: "jsonp" 。这会导致 jQuery 添加 callback=xxxxx 查询参数并通过相应的脚本(JSONP 方法)获取响应。

var url =
'https://api.flightstats.com/flex/schedules/rest/v1/jsonp/from/SYD/to/MEL/departing/2016/3/28?appId=f4b1b6c9&appKey=59bd8f0274f2ae88aebd2c1db7794f7f';

$.ajax(url, {dataType: "jsonp"}).then(function(response) {
	log(response);
}, function(err) {
    log("$.ajax() error:")
	log(err);
})

<script src="http://files.the-friend-family.com/log.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>