Need Help Calling an API

Question

We're trying to call an API using JavaScript. There is an example JavaScript on the website of the API as below:

<!DOCTYPE html>
<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    $(function() {
        var params = {
            // Request parameters
        };
      
        $.ajax({
            url: "https://emi.azure-api.net/ICPConnectionData/single/?id={ICP}&" + $.param(params),
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{subscription key}");
            },
            type: "GET",
            // Request body
            data: "{body}",
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    });
</script>
</body>
</html>

We have entered the {ICP} and {subscription key} but when we run it we get error every time.

The error we're getting is just the one from it failing and showing alert("error"). We tried using data.status and got error 0 "error".

Here's a screenshot of the console and the error in it.

New to using APIs like this and so assuming we're just missing something obvious?

Thanks in advance for your help.

The website with the API info is here

And here's the code I have so far so you can try it yourself:

<!DOCTYPE html>
<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    $(function() {
        var params = {
            // Request parameters
        };
      
        $.ajax({
            url: "https://emi.azure-api.net/ICPConnectionData/single/?id=0000212621UNA89&" + $.param(params),
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","f9d45d33880f4e0dac46255d9bc90fce");
            },
            type: "GET",
dataType: 'jsonp',

            // Request body
            data: "{body}",
success:function(data){alert(data)}
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    });
</script>
</body>
</html>

In Chrome dev tools, navigate to the network tab BEFORE your API call fires, you can likely see some useful information if you find it in the list on that tab. — Caleb O'Leary, Apr 18 '16 at 02:38
what's the error you're getting, paste it in your question detail — Robus, Apr 18 '16 at 02:39
What error do you get? Like @CalebO'Leary said, check the network tab and see if there is an HTTP status code other than 200 for the API request, like for instance a status 400 bad request. Also check Chrome's Console tab to see if there were any JavaScript errors. — Maximillian Laumeister, Apr 18 '16 at 02:40
The error is just the one that shows when it fails from alert("error") — Chase, Apr 18 '16 at 02:47
Image of the error in the console: http://i.imgur.com/GDeiBra.png — Chase, Apr 18 '16 at 02:52
It looks to be a CORS error to me (the CORS error shows in the console). I think since the header is not set, it will be impossible to do the API call client-side (in the user's web browser). You might look at doing the API call on your web backend and proxying the result to the client. — Maximillian Laumeister, Apr 18 '16 at 04:46
Try running chrome with the `--disable-web-security` option and see how it goes (have to close all instances of Chrome before doing this). — , Apr 18 '16 at 04:51

score 2 · Answer 1 · edited May 23 '17 at 12:31

2

I think it's a cross domain issue CORS

first you can install a chrome extension: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon
switch it on, to see whether your ajax can get correct data.
if yes you get the data, and if API is belong to you, try to set a response header Allow-Control-Allow-Origin:*

update:

try add dataType and success options:

$ajax({
  url:'http://yoururl.com',
  method:'GET',
  dataType: 'jsonp',
  success:function(data){alert(data)}
})

update: I test the api url through postman, api is good for use by no Allow-Control-Allow-Origin:* header in the response. which cause the CORS issue.

when I send request in jquery ajax, it returns 401 access denied error, which means the authentication header cannot be sent in a jsonp ajax call. one way to sovle this problem is:

go to your API server, set a response header Allow-Control-Allow-Origin:*

you can refer to this question:

How do you send a custom header in a cross-domain (CORS) XMLHttpRequest?

edited May 23 '17 at 12:31

Community

1
1

answered Apr 18 '16 at 02:59

Sabrina Luo

3,810
4
16
35

Switched it on and still didn't work. – Chase Apr 18 '16 at 03:58
I still think it's a CORS issue. can you try put you callback into success: just like I mentioned in the answer. – Sabrina Luo Apr 18 '16 at 04:07
Adding dataType: 'jsonp', Stopped the error. But still no successfull call. – Chase Apr 18 '16 at 04:32
I have added the full code I'm using to the question so you can try it out yourself. Thanks heaps for helping out by the way. – Chase Apr 18 '16 at 04:35

Need Help Calling an API

1 Answers1