An easy fix for CORS problems with the Google Places API

Hi everyone,

I recently encountered a CORS issue with a custom Google Autocomplete API in a web app, and I couldn't find a clear solution online. So, I decided to share what worked for me.

Here's what I tried before finding the fix:

1. Making the API private

2. Modifying the cloud function based on suggestions from ChatGPT and Claude in at least five different ways

3. https://intercom.help/flutterflow/en/articles/8036270-understanding-api-calls-cors-and-flutterflow-s-implementation

4. https://community.flutterflow.io/ask-the-community/post/google-places-api-cors-1AlrrxtaK4SRYef

5. https://community.flutterflow.io/database-and-apis/post/cors-issue-with-google-place-api-7R2rXNbRA1kFbkZ

6. https://community.flutterflow.io/database-and-apis/post/cors-issues-with-google-places-LRa5TmgjLZlyw7Z

7. https://community.flutterflow.io/ask-the-community/post/google-places-api-cors-1AlrrxtaK4SRYef
   
   But none of these helped.

   The Solution

   Then I found a really simple workaround: https://github.com/Rob--W/cors-anywhere/

   1. I just added Content-Type: application/json as header to the api

2. In the advanced settings I added https://cors-anywhere.herokuapp.com/ to the Proxy prefix url

   

3. Then Added a custom header to the web app:

<script>
(function() {
  var cors_api_host = 'cors-anywhere.herokuapp.com';
  var cors_api_url = 'https://' + cors_api_host + '/';
  var slice = [].slice;
  var origin = window.location.protocol + '//' + window.location.host;
  var open = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    var args = slice.call(arguments);
    var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
    if (targetOrigin && targetOrigin[0].toLowerCase().includes('maps.googleapis.com')) {
      args[1] = cors_api_url + args[1];
    }
    return open.apply(this, args);
  };
})();
</script>

And that's it.
Hope this helps anyone facing a similar issue!