試圖通過 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旨在避免的錯誤。

跨域讀取阻塞 (CORB) 阻止了跨域響應

結果：parsererror 錯誤：processJSONPResponse 未被調用 200 成功

有沒有辦法讓它工作或任何其他JS方式？

Answer 1

要使 JSONP 工作，API 必須返回有效響應。 這個 API 沒有。

這與 JSONP 圍繞 CORS 工作的方式有關（我之前在這里更詳細地解釋了 CORS）。

為了了解 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 代理。 您必須在某處運行帶有此功能的服務器，以便它可以添加 CORS 標頭。 然后你可以得到這樣的數據：

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