Javascript Cross domain JSON

Question

Hi I am trying to use ONLY JavaScript and HTML to read the json object from a URL. I am using the following code:

function getJSONP(url, success) {

    var ud = '_' + +new Date,
        script = document.createElement('script'),
        head = document.getElementsByTagName('head')[0]
            || document.documentElement;

    window[ud] = function(data) {
        head.removeChild(script);
        success && success(data);
    };

    script.src = url.replace('callback=?', 'callback=' + ud);
    head.appendChild(script);
}

getJSONP('http://webURl?&callback=?', function(data){
    console.log(data);
});

As you would have guessed I am getting Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access.

FYI the server returns JSON data and doesnot have callback function.

Cheers for your help.

If the server does not support JSONP and does not support CORS than you are out of luck. JavaScript can not work around the same origin policy. It is there for a reason. — epascarello
– epascarello, Commented Aug 31, 2015 at 0:35
@epascarello so you think If the server support JSONP then this code will works fine. — usrNotFound
– usrNotFound, Commented Aug 31, 2015 at 0:40
Do you have a mockup of what looks like the actual result of your request? — romuleald
– romuleald, Commented Sep 8, 2015 at 11:52

Community · Accepted Answer · 2017-05-23 11:53:14Z

7

+50

The server either needs to have CORS enabled using headers like this: (Credits to the answer here: CORS with php headers)

// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
}

Or the server needs to output JSONP like:

echo $_GET['callback'] . '(' . json_encode($whatever) . ')';

Another option if this is not on your own server is to create a PHP file on your own server that does a filegetcontents on the url you need to read (with the JSON data without cors) and echo the same data in JSONP format. You can then use this new PHP file (url) in your pure javascript getJSON function.

Without a server in the middle or cors or jsonp, it is not possible.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Sep 3, 2015 at 7:16

Niki van Stein

10.8k3 gold badges33 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GuyT Over a year ago

Don't steal other answers! stackoverflow.com/questions/8719276/cors-with-php-headers

Niki van Stein Over a year ago

My apologies, I should have added the link indeed. Edited my answer to include the link. Thank you for noticing.

Lyes BEN · Accepted Answer · 2015-09-04 01:14:13Z

4

If you want a quick & working fix, you can fetch the content via an iframe, or use a proxy like YQL.

But I would recommend using a backend strategy to fetch your content, then process it with javascript.

answered Sep 4, 2015 at 1:14

Lyes BEN

1,0105 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript Cross domain JSON

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related