使用 JSONP 绕过同源策略并解析数据

Posted 2023-02-27

【中文标题】使用 JSONP 绕过同源策略并解析数据

【英文标题】：Bypass same-origin policy with JSONP and parse data

【发布时间】：2021-02-01 02:52:16

【问题描述】：

我找到了以下用于全球 COVID 感染数据的 JSON 资源：

https://opendata.ecdc.europa.eu/covid19/casedistribution/json/

我已经尝试过这个简单的回调函数（以及许多变体）来验证我确实收到了 我可以解析的东西：

<script>
mycallback=function(data)
console.log('You have data! '+data)
;
</script>
<script src='https://opendata.ecdc.europa.eu/covid19/casedistribution/json/?callback=mycallback'> 
</script>

但这会返回一个大的空虚，没有控制台日志条目，也没有错误代码。

我做错了什么？

如果有人有关于如何“解析”这些“数据”的提示，我也将不胜感激，因为我知道我得到的技术上是一个脚本，但即使我将响应视为原始文本，我也可以使用它。

【问题讨论】：

您不能使用 JSONP，因为来自 https://opendata.ecdc.europa.eu/covid19/casedistribution/json/?callback=mycallback 的响应不是可执行的 javascript 代码（这就是 JSONP），而只是 JSON 数据。所以你得到的实际上并不是一个脚本——因为看起来那个端点没有设置 JSONP 支持，所以你的 callback 查询参数没有效果。

您可能想要做的是，使用 fetch API 或 XHR 或 JavaScript 库中的一些 ajax 函数，但使用 https://cors-anywhere.herokuapp.com/https://opendata.ecdc.europa.eu/covid19/casedistribution/json/ 作为请求 URL。有关解释，请参阅***.com/a/43881141/441757

的答案

【参考方案1】：

您可以执行类似 http get 请求以及 CORS 代理的操作，然后只需对返回的数据执行 JSON.parse ¯_(ツ)_/¯