search

lejard-h / google_maps_webservice

BSD 3-Clause "New" or "Revised" License
168 stars 221 forks source link

CORS Issue in Flutter web #128

Closed kristbp2 closed 3 years ago

kristbp2 commented 3 years ago

When using the Places API in a Flutter web app, I'm getting a CORS error. It seems that this is due to the place API having a different end point for browser (javascript) requests. Below are samples of the requests made by the working Google Maps JavaScript API and the web services API, respectively.

# Google Maps Javascript API
curl 'https://maps.googleapis.com/maps/api/place/js/PlaceService.GetPlaceDetails?2sen-US&10e3&14m1&1sChIJN1t_tDeuEmsRUsoyG83frY4&16m1&1sname%2Cformatted_address%2Cplace_id%2Cgeometry&17m1&2e1&callback=_xdc_._kzcq3g&key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&channel=2&token=104847' \
  -H 'sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"' \
  -H 'Referer: https://fiddle.jshell.net/' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36' \
  --compressed -v

# Web service API
curl 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJFZiKNT_XDIgRGo1TCsq9bG0&fields=formatted_address%2Cgeometry%2Cname%2Cphoto%2Crating%2Cprice_level&key=AIzaSyCm9K8tWNg2ihpfnJrfkJ8D6SjMV9sKXZE' \
  -H 'authority: maps.googleapis.com' \
  -H 'sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"' \
  -H 'sec-ch-ua-mobile: ?1' \
  -H 'user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36' \
  -H 'accept: */*' \
  -H 'origin: https://localhost:7000' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: https://localhost:7000/' \
  -H 'accept-language: en-US,en;q=0.9' \
  --compressed -v

I believe that either the Places portion needs custom code to call the Javascript API, or the request formatting needs to change to make it actually cross-compatible. Not sure what the best/correct option is.

iqtedar123 commented 3 years ago

@lejard-h Can you kindly fix this please? :)

lejard-h commented 3 years ago

No it's not possible, the Google API was not made to be call from browser. You need to use a proxy server that add the CORS to your request.