javascript - 尝试通过 jQuery getJSON jsonp 读取远程 URL，但它不起作用

Question

我正在尝试使用 NPPES API .

我只需向它发送一个像这样的链接 https://npiregistry.cms.hhs.gov/api/?number=1801965413&version=2.1并以 jQuery 返回结果。

根据我的研究，因为它是跨域的，我需要使用 jsonp 但我无法让它工作。

$.getJSON({
    url: "https://npiregistry.cms.hhs.gov/api/?number=1801965413&version=2.1",
    dataType: "jsonp",
    type: "POST",
    jsonpCallback: 'processJSONPResponse',
    contentType: "application/json; charset=utf-8",
    success: function (result, status, xhr) {
        console.log(result);
    },
    error: function (xhr, status, error) {
        console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
    }
});

我收到以下错误，这是我认为 jsonp 应该避免的错误。

Cross-Origin Read Blocking (CORB) blocked cross-origin response

Result: parsererror Error: processJSONPResponse was not called 200 success

有没有办法让它工作或任何其他 JS 方式？

Answer 1

要使 JSONP 正常工作，API 必须返回有效的响应。此 API 没有。

这与 JSONP 围绕 CORS 的工作方式有关(我之前更详细地解释了 CORS here)。

要了解 JSONP 的工作原理，假设我们网站上的某处有以下代码段 <script>标记某处:

processJSONResponse({"some": "json", "from": "wherever"});

这段代码调用了一个JS函数processJSONResponse使用一些 JSON 作为唯一的参数。我们还知道 JS 可以来自其他来源，例如 <script src="somewhere.com/some.js"></script> ，对吗？

好吧，由于 CORS，我们无法直接从另一个源(在您的例子中是 API 端点)加载一些 JSON，但是正如我们上面探讨的那样，从其他地方加载一些 JavaScript 代码是完全可以的。

因此，一些 API 具有 JSONP 模式，它们不是直接返回 JSON，而是返回“text/javascript”类型的响应，并且响应看起来像我进一步展示的脚本:它包含一个函数调用和API 响应是传递到函数中的第一个也是唯一的参数。

假设我们在 example.com/api 上有一个支持 JSONP 的 API，端点可能类似于 ` https://example.com/api?jsonp=helloThere "响应将如下所示:

helloThere({"some":"response"});

您会看到 API 必须通过包装实际 API 响应的某些函数调用来响应。当 API 具有此选项时，您只需实现该函数(此处为 helloThere )，您就会在 JavaScript 中获得响应。 jQuery 有一个帮助程序来完成这些繁琐的工作(例如，它需要创建一个 <script> 标记，并将端点的 URL 作为 src 属性。

不过，您指定的 API 似乎不支持 JSONP。另一种方法可能是使用 CORS 代理，例如 this one 。您必须在某个地方运行一个具有此功能的服务器，以便它可以添加 CORS header 。然后你可以得到这样的数据:

fetch("https://your-cors-proxy.com/https://npiregistry.cms.hhs.gov/api/?number=1801965413&version=2.1")
.then(response => response.json())
.then(console.log)