Uncaught SyntaxError: Unexpected token : if JSONP is used, and XMLHttpRequest cannot load is only JSON is used

Question

I am trying to use JSONP to get around the same origin policy, but as far as I understood, I have the mentioned error because the server is not actually returning a JSONP response. But if I use json as my dataType then I get an "XMLHttpRequest cannot load, No 'Access-Control-Allow-Origin' header is present on the requested resource" Here is my code:

$.ajax({
      url : "https://maps.googleapis.com/maps/api/place/nearbysearch/json?    location=-33.86,151.195&radius=5000&type=ATM&keyword=ATM&key=MyAPIKey",
      type : "GET",
      dataType: 'jsonp',
      success:function(data){
         console.log(data);
      }
    })

A similar problem can be found here [json Uncaught SyntaxError: Unexpected token : ] but only served to understand what is going on rather than solving the problem. I am relatively new to this so please I will appreciate a step-by-step guide to solving this.

Having same problem on chrome and firefox.

Answer 1

You seem to be missing the callback name, having an extra "type" parameter, and not using the 'data' parameter to pass the request params:

https://learn.jquery.com/ajax/working-with-jsonp/

EDIT: I've taken a closer look at your code and tried it in plunker. I've tried this:

$(function(){
$.ajax({
      url : "https://maps.googleapis.com/maps/api/place/nearbysearch/json",
      data:{
        location:"-33.86,151.195",
        radius:"5000",
        type:"ATM",
        keyword:"ATM",
        key:"MyAPIKey"

      },
      dataType: 'jsonp',
      success:function(data){
         console.log(data);
      },
      error:function(data){
         console.log("err",data);
      }
    })
});

What I got back was an error that your API key is not correct (ofc, its not). But if you will put the proper key in, then JSONP call will still not work because API that you are calling is not returning you JSONP, but JSON. (as you can see at the end of the URL).

Server side should specifically support JSONP in order to use it, cause it is supposed to wrap the response in a script that issues a callback call with data.

So:

• ajax JSONP call works

• given server resource does not return JSONP

The error you are seeing is the result of your application trying to execute resulted JSON as a script.

EDIT2:

In general, "Access-Control-Allow-Origin" header is set by the server in the response. If your referrer page origin does not match the setting on that header, the browser will do what it does now. You cannot control it in the request.

See for reference on CORS

Its all server-side/under the hood in browser. But there were a similar question in here:

(Another question on same topic)Access-Control-Allow-Origin using Google Maps JavaScript API v3.

Try to use googles library if you can. Perhaps it does some other call in before requesting the resource to enable teh CORS from your site.