'Google Places CORS Error, serving Flutter Web, Even When Redirecting with NGROK --host-header-rewrite flag?

StackOverflow Community,

I have a problem that someone may have solved before, but I find it truly confounding.I'm running a flutter web server on a vm in Azure with

flutter run --release -d web-server --web-port 8081

After getting CORS error attempting to hit Maps or Places API, I elected to run another instance of NGROK with the --host-header=rewrite flag, as I have done for other APIs to avoid this CORS error. This works fine with all of the other APIs we are hitting.

However, when serving this app, I still get a very similar CORS error, identifying items hidden:

Access to XMLHttpRequest at 'https://hidden1.ngrok.io/maps/api/place/autocomplete/json?input=s&key=hidden&sessiontoken=hidden' from origin 'https://hidden2.ngrok.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Hidden1 is my maps API redirect and Hidden2 is my app's dev redirect.

Am I still getting this error because I somehow need to serve place autocomplete, in this case, from the same subdomain as the app's subdomain?? I'm confused, because this is not a constraint of any other APIs I remember using in the past.

I still get a 200 response with this CORS error, but chrome refuses to do anything with it unless I use a CORS-enabling extension.

If I do need to redirect Places and the app's Web Server through the same URL, are there any recommendations for doing this?

Thanks in advance for your time and thoughts..



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source