Question

I am trying to request JSON from Google Places API, but I am still getting the cross-domain request error after firstly including:

<?php 
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: POST, GET");
header("Access-Control-Allow-Headers: x-requested-with");
?>

The JSON request I am using is standard JQuery:

function load() {
    var url = 'https://maps.googleapis.com/maps/api/place/details/json?reference=CnRhAAAARMUGgu2CeASdhvnbS40Y5y5wwMIqXKfL-n90TSsPvtkdYinuMQfA2gZTjFGuQ85AMx8HTV7axABS7XQgFKyzudGd7JgAeY0iFAUsG5Up64R5LviFkKMMAc2yhrZ1lTh9GqcYCOhfk2b7k8RPGAaPxBIQDRhqoKjsWjPJhSb_6u2tIxoUsGJsEjYhdRiKIo6eow2CQFw5W58&sensor=true&key=xxxxxxxxxxxxxx';
    $.ajax(url, {
       async:   true,
       success: function(data, textStatus, jqXHR) {
           dump(data);
       }
    });
}

I would use a JSONP query instead, but the Google Places API doesn’t support JSONP…how can I solve this? With a proxy server? I am not sure how to go about this or what I’m doing wrong.

Answer 1

The URL you are requesting data from has to grant permission with access control headers. It would defeat the object of the same origin policy is a remote origin could grant permission to itself!

If the API you are using doesn’t provide a JSON-P API, and doesn’t set access control headers itself, then you need to use a proxy. Either one you run yourself, or a third party one that will convert to JSON-P (such as YQL).