I'm facing a rather sudden Google Maps Geocoding issue. It was all working fine till yesterday but since then I've been getting a CORS error on any request made to their Geocoding API.
My request:
https://maps.googleapis.com/maps/api/geocode/json?latlng=18.92187618976372,72.82581567764282&key=<API_KEY>
My request headers:
Provisional headers are shown
Accept:application/json, text/plain, */*
Origin:http://domain
Referer:http://domain/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36
X-FirePHP-Version:0.0.6
Response headers:
access-control-allow-origin:*
alternate-protocol:443:quic,p=1
cache-control:public, max-age=86400
content-encoding:gzip
content-length:1279
content-type:application/json; charset=UTF-8
date:Thu, 23 Jul 2015 09:50:49 GMT
expires:Fri, 24 Jul 2015 09:50:49 GMT
server:mafe
status:200
vary:Accept-Language
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block
Error message:
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/geocode/json?latlng=18.92187618976372,72.82581567764282&key=<API_KEY>. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://domain' is therefore not allowed access.
My system was setup in such a way that I have my front end is being served from a cross domain from my logic server. For this, I had set my withCredentials flag as true. Since Maps' API uses a * wildcard, withCredentials was giving an error.
To solve this, I used a separate XHR method for Maps calls where the flag was set as false.