如何解决ERROR No'Access-Control-Allow-Origin'

Question

I use a AJAX-Jquery post to calculate the time to get from A to B using Google API.

But i get the error "XMLHttpRequest cannot load https://maps.googleapis.com/maps/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

I've read a lot of posts and tried several solutions. None of them worked.

1. with different variants of headers in my .php page

   header("Access-Control-Allow-Origin", "*");
   header('Access-Control-Allow-Credentials: true');
   

2. modifing my .htaccess file:

   Header set Access-Control-Allow-Origin "*"
   

3. installing Chrome extension Allow-Control-Allow-Origin

The third choise allowed me to test my code but is not a real solution. Does anyone succeded to solve this?

Answer 1

What you're going to need is

JSONP

JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy.

Somewhere inside your AJAX call, you're going to make sure that the dataSet is jsonp.