Trying to read remote URL vis jQuery getJSON jsonp but its not working

Question

I'm trying to use the NPPES API .

I just need to send it a link like this https://npiregistry.cms.hhs.gov/api/?number=1801965413&version=2.1 and return the results in jQuery.

From what I researched because its cross domain I need to use jsonp but I can not get this to work.

$.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)
    }
});

I get the following error, which is what I thought jsonp was meant to avoid.

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

Result: parsererror Error: processJSONPResponse was not called 200 success

Is there a way to get this to work or any other JS way?

Answer 1

For JSONP to work, the API must return a valid response. This API does not.

This has something to do with the way that JSONP works around CORS (I explained CORS previously in more detail here ).

To see how JSONP works, let's say we had the following piece of code somewhere on our website as a <script> tag somewhere:

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

this piece of code calls a JS function processJSONResponse with some JSON as the only argument. We also know that JS can come from other origins, like <script src="somewhere.com/some.js"></script> , right?

Well, because of CORS we can't directly load some JSON from another origin (in your case the API endpoint), but it's totally fine to load some JavaScript code from somewhere else as we've explored above.

Hence some APIs have a JSONP mode where, instead of returning the JSON directly, they instead return a response of type "text/javascript" and the response looks like the script I showed further up: It contains a function call and the API response is the first and only argument being passed into the function.

Let's say we have a JSONP-capable API at example.com/api, an endpoint might look like ` https://example.com/api?jsonp=helloThere " and the response would look like this:

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

You see that the API has to respond with some function invocation wrapping the actual API response. When an API has this option, you only need to implement the function (here it would be helloThere ) and you will get the response into your JavaScript. jQuery has a helper for doing the fiddly bits of this (it needs to create a <script> tag with the URL of the endpoint as the src attribute, for example.

The API you specified doesn't seem to have JSONP-support, though. An alternative might be to use a CORS proxy like this one . You will have to run a server with this somewhere, so it can add the CORS headers. You can then get the data like this:

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