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, Aug 31 '15 at 00:35
@epascarello so you think If the server support JSONP then this code will works fine. — usrNotFound, Aug 31 '15 at 00:40
Do you have a mockup of what looks like the actual result of your request? — romuleald, Sep 08 '15 at 11:52
I guess the best way to go is to read it via your web server, you need a kind of proxy. — romuleald, Sep 09 '15 at 04:26

score 7 · Answer 1 · edited May 23 '17 at 11:53

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.

Don't steal other answers! http://stackoverflow.com/questions/8719276/cors-with-php-headers — GuyT, Sep 09 '15 at 08:17
My apologies, I should have added the link indeed. Edited my answer to include the link. Thank you for noticing. — Niki van Stein, Sep 09 '15 at 10:49

score 4 · Answer 2 · answered Sep 04 '15 at 01:14

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 04 '15 at 01:14

Lyes BEN

990
4
14

Javascript Cross domain JSON

2 Answers2

Linked