Google API CORS ISSUE

[ionitron-bot[bot]]

Original issue by @jackryu on 2018-04-26T14:41:02Z

Hello Team,

I am trying to use Google Place Search REST JSON api, but its showing CORS error.

API URL : https://maps.googleapis.com/maps/api/place/textsearch/json?query=123+main+street&key=YOUR_API_KEY API Documentation url : https://developers.google.com/places/web-service/search

ERROR

Failed to load https://maps.googleapis.com/maps/api/place/textsearch/json?query=Mini+Mart+CITY+PLAZA+Gaur+City+1&key=mykey: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

Code Provider

  getPlaceData(){
    return new Promise(resolve => {
      this.http.get(this.url).subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }

Code Provider Use

ionViewDidLoad(){
    //this.searchProvider.searchPlace().subscribe(res=> console.log(res));
    this.searchProvider.getPlaceData()
    .then(data => {
      this.odata=data;
      console.log(data);
    });
  }

Ionic Framework: 3.9.2 Ionic App Scripts: 3.1.9 Angular Core: 5.2.10 Angular Compiler CLI: 5.2.10 Node: 8.9.3 OS Platform: Windows 10 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

[arihantdaga]

I am also facing the same Now. Earlier with ionic 3 it was fine if we built the apk but with ionic 4 this issue is coming up. I observed something - The app was running with a static file. In Ionic 4 it's being served on a localhost. Observed this pattern in chrome debug tool-> Remote Devices-

Ionic 3 - file://some_path/index.html Ionic 4 - http://localhost:8080/home

And due to this in ionic 4 we are getting this error in console.

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?sensor=false&input=Hyder&types=(regions)&key=MY_KEY&near_location=17.385044,78.486671' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Has anyone solved this ?

[omkarachary]

Even Im facing the issue any solution guys