0

Each time I get a JSON from an URL I face with this ERROR:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I'm able to workaround it only through a chrome extension, but I still don't understand why I face this error simply calling an URL having this kind of JSON:

{"results" : [
  {
     "elevation" : 402.0888977050781,
     "location" : {
        "lat" : 11,
        "lng" : 11
     },
     "resolution" : 152.7032318115234
  }],"status" : "OK"}

It seems to me depending on HTML tags, but how generally could I do to simply parse the JSON above? Each method coming from Ajax or JQuery return me into this problem

The code I use to call the URL containing the JSON is a simple HTML having this script:

<script type="application/javascript">
            function findAltitude() {
                var lat  = document.getElementById('lat').value;
                var lon  = document.getElementById('lon').value;

                var url;

                var json, data;

                $.ajax({
                      dataType: "json",
                      url: url,
                      data: data,
                      success: function(data) {
                           alert(data.results[0].elevation);
                        }
                    });
            }

      </script>
Noomak
  • 371
  • 5
  • 19
  • 2
    The issue isn't specifically due to the JSON response, it's because the URL you're calling hasn't included CORS headers in the response, which means that you are blocked from working with the response due to the [Same Origin Policy](http://en.wikipedia.org/wiki/Same-origin_policy). There is nothing you can do to stop this. A possible workaround is to use your own server as a proxy, but this means you would have to write server side code to make the request for you instead. – Rory McCrossan Jul 30 '17 at 19:03
  • Ok Rory, but so you're saying that Google APIs does not allow me to work on JSON response by client side? In Java I'm able to call the URL, get the content and parse the JSON in easy way – Noomak Jul 30 '17 at 19:08
  • If you can show your actual JS code we may be able to offer more assistance. As I mentioned above, it will work server side, hence why the Java example you have works fine. – Rory McCrossan Jul 30 '17 at 19:10
  • Just added the script, same problem on URL like this: http://time.jsontest.com/ – Noomak Jul 30 '17 at 19:13
  • 1
    You missed the important part out - the URL. However, from the look of your code the issue is as I described, lack of CORS in the response. There's nothing you can do, except make the request from the server instead. If you have access to Java, then that will definitely work – Rory McCrossan Jul 30 '17 at 19:19
  • Yes because the URL is containing my token, but nothing more that a json file containing what described above, thank you – Noomak Jul 30 '17 at 19:22
  • 1
    Or use a thrid party proxy service – charlietfl Jul 30 '17 at 19:57
  • 1
    Google APIs all have good documentation describing in detail the supported ways to call the APIs from Web applications. And the supported mechanisms don’t involve rolling your own custom calls using XHR or the Fetch API or Ajax functions from JavaScript libraries. Instead you need to read and follow the documentation at, for example, https://developers.google.com/maps/documentation/javascript/places and https://developers.google.com/maps/documentation/javascript/tutorial – sideshowbarker Jul 31 '17 at 02:03

0 Answers0