Requesting Google Place API with xhr got CORS issue

Question

On my webpage I have some javascript code to query Google Place API (GET) for response. Here's my code look like:

// Sending XHR request
var url = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query=KPMG+Seattle&key=<<MY_KEY>>';

var xhr = createCORSRequest('GET', url);

xhr.setRequestHeader('Access-Control-Allow-Headers', '*');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

xhr.send();

//**********************//

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();

  if ("withCredentials" in xhr) {

    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);

  } 
  else if (typeof XDomainRequest != "undefined") {

    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } 
  else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

I am running this local HTML file in my browser, and got CORS error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'null' is therefore not allowed access. The response had HTTP status code 405.

I am wondering what the problem can be (I added Access-Control-Allow-Origin to request header)?
According to the Google Tutorial this should be enough to make a request?

Please help point out where I am doing wrong... Thanks!

Answer 1

Please see this post XMLHttpRequest Origin null is not allowed

Basically there is a security feature you need to disable to allow XHR of different origin if you are running from a local file.

See the first answer in the post.