How to consume Json Data in Jquery Ajax

Question

I have a URL, which gives response on browser: https://api.sandbox.paypal.com/retail/merchant/v1/locations

It gives:

{
    "errorCode": 600031,
    "message": "Missing access token",
    "developerMessage": "You must provide an access token when calling this API. It can be passed as either a header of the form \"Authorization: Bearer \" or as a query parameter called access_token.",
    "errorType": "oauth/missing_access_token",
    "correlationId": "4de95cd8aa090"
}

I tried this:

$.ajax({
    url: "https://api.sandbox.paypal.com/retail/merchant/v1/locations",
    dataType: 'json',
    type: 'POST',
    success: function (data) {

        console.log(data); 
        alert("success", data);
    },
    error: function (data) {
        alert("fail", data);
        console.log(data);
        alert("Sorry..Please try again later"); 
    },
});

But I am not getting the same response as I am getting on browser. I am getting error.

Please check here http://jsfiddle.net/ajitksharma/wehGy/

However while debugging on Browser console I got the error:

XMLHttpRequest cannot load https://api.sandbox.paypal.com/retail/merchant/v1/locations. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I checked, it seems server side response is in correct JSON format and I dont have option of change in server side — ajitksharma, Jul 18 '14 at 06:10
You must have to provide Access token in order to run it successfully. — Nomi Ali, Jul 18 '14 at 06:15

score 1 · Accepted Answer · edited May 23 '17 at 12:21

You can make AJAX calls to a backend API which is on another domain, however, it needs to return JSONP format and not just JSON, otherwise you get and error. This is due to same origin policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy.

This discussion may be helpful to understand JSONP: Can anyone explain what JSONP is, in layman terms?

Since you don't have control over PayPal's API and you can't ask them to return JSONP to you, these requests to PayPal's API need to be done from the server-side script of your application.

score 0 · Answer 2 · answered Jul 18 '14 at 06:14

0

Running this from any other location, for example JSFiddle, will give you the Access-Control-Allow-Origin error since you're making a cross-domain request. Please read further about the same-origin policy.

As for the first error, its because your request needs an API key from paypal. See this page about getting an API key and making a simple request.

answered Jul 18 '14 at 06:14

kaminari

306
1
5

1

Well I got ur point, but as i am getting response on browser smiply hitting URL, why not with AJAX. Any solution, how to allow cross origin..i tried but couldnt get the result – ajitksharma Jul 18 '14 at 06:18
1

You can't use AJAX to make cross-domain requests unless their API supports JSONP. When you just paste the URL into the browser, you're not going across domains, you are in fact in their domain. – kaminari Jul 18 '14 at 06:24

score 0 · Answer 3 · answered Jul 18 '14 at 09:21

As Lisa Stoz and kaminari suggested it is not possible to call a service in another domain without some patch work. Now as you see the response when you hit that url via browser it says you need to add an extra header to your ajax request something like 'authorisation'

How to consume Json Data in Jquery Ajax

3 Answers3