Custom Code
GL
Greyhound Labs

CORS error in flutter flow custom component to access Google API

Resolved

I created a custom component which is basically is a textfield integrated with google api autocomplete service.

Everytime the user type something in the textfield it makes a call to google api to get autocomplete hints, collecting information about the place, like address, etc.

I developed the custom component in my local machine using flutter and to test it locally I started chrome with params--web-browser-flag "--disable-web-security" to a avoid CORS poliy issue.

I added the custom component in flutter flow, and end up with same CORS issue:

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=&sessiontoken=XXXXX&language=pt-br&region=BR&key=XXXX' from origin 'https://app.flutterflow.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have the following questions:

  • Is it possible to test this component in flutter flow in "Run Mode" avoiding the CORS policy? It could be a workaround to make it work during development.

  • How this issue will be solved after publish a real app?

3
3 replies