2

I need to get data from another site. The site returns json. I tried this:

function get_data() {
    $.getJSON("https://kde.link/test/get_field_size.php",
        function(data){
            var get_width = data.width;
            var get_height = data.height;
            /* some code here */
    });
};

But this doesn't work. Moreover, I've got this mistake: XMLHttpRequest cannot load https://kde.link/test/get_field_size.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080' is therefore not allowed access. How can I get data from another site?

Dexa
  • 99
  • 1
  • 11
  • 2
    This is the cross-origin policy in play. Do you have access to `kde.link`? Try adding support for JSONP if you do. – BenM Nov 29 '15 at 10:35
  • To access to third party site you will need to use server side proxy. like `proxy.php?url=https://kde.link/test/get_field_size.php` – jcubic Nov 29 '15 at 10:38

3 Answers3

1

Due to the same origin policy restriction that's built into the browsers you cannot make cross domain AJAX requests. If you need to do that you will need to have access to the server side script (get_field_size.php) and either enable CORS or JSONP.

With CORS, the server must support the OPTIONS HTTP verb and send a special Access-Control-Allow-Origin in which it explicitly lists the domains that can call it.

If you don't have control over this remote script then you will have to write a server side script on your domain that will act as a bridge between the local and the remote domain. Then you will make the AJAX request to your local script:

$.getJSON("/get_field_size_bridge.php",
    function(data){
        var get_width = data.width;
        var get_height = data.height;
        /* some code here */
});

The bridge will then act as a proxy.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
0

this usually happens when we request something from another site of our own. Please just add this on the top of your php file to handle the request.

 header('Access-Control-Allow-Origin: *');

hope helps, good luck.

Theo Itzaris
  • 4,321
  • 3
  • 37
  • 68
-1

Try this updated code

    <!DOCTYPE html>
    <html>
        <head>
            <title>JQUERY AJAX POST JSON CAPTURE NAME:VALUE Pair</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        </head>
        <body>
            <div id="content"></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" /></script>
            <script type="text/javascript">
                $.ajax({
            url: 'https://kde.link/test/get_field_size.php',
            dataType: "json",
            data: { },
            success: function(response) {
              alert(response.width);
              alert(response.height);
            }
          });
            </script>
        </body>
    </html>
Dean Christian Armada
  • 6,724
  • 9
  • 67
  • 116