10

I have a big problem that makes me late on my project I have the CROS problem that blocks my requests I can't correct it, I added in my .htacess the lines below, but it doesn't work I can't understand it

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/place/autocomplete/json…nents=country:fr&key=MY_KEY. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

RewriteEngine On

RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.kosmos-digital.com/$1 [R,L]

Rewritecond %{HTTP_HOST} ^kosmos-digital.com$
Rewriterule ^(.*) https://www.kosmos-digital.com/$1 [QSA,L,R=301]

<ifModule mod_headers.c>
  SetEnvIf Origin "http(s)?://(www.kosmos-digital.com|www.maps.googleapis.com)$" AccessControlAllowOrigin=$0
  Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
  Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
</ifModule>

I don't think it's from my code, but I'll put it underneath :

try {
  await Dio().get<String>("https://maps.googleapis.com/maps/api/place/autocomplete/json?input=28%20avenue%20pierre%20corneille&language=fr&components=country:fr&key=MY_KEY").then((e) {
  print(e.data);
}).catchError(print);
  // Map<String, dynamic> dataAsJson = await HttpUtils.getForJson(url, headers: headers);
  // print(dataAsJson.toString());
} catch(e) {
  print(e.toString());
}
dafep
  • 219
  • 4
  • 6
  • 2
    I was not able to make calls from Flutter Web... my only option was making a Firebase Function and send the data to Firestore to be consumed. – Mariano Zorrilla Feb 28 '20 at 18:43
  • Hi @dafep, did you manage to get this to work? I can't really make a Firebase Function due to some constraints on my project – atreeon Jun 29 '20 at 12:04
  • same issue here. this is a bummer for flutter-web dev that needs a solution soon. – Anthony D. Aug 02 '20 at 16:35
  • Could you check if there is any restriction on your API keys like: https://youtu.be/2_HZObVbe-g – Hao-Cher Hong Jul 25 '21 at 10:09
  • The cors headers are totally controlled by Google API server. Your browser reads those header and decide whether or not letting your app use the response. It's not controlled by your app but the browser, so there's nothing you can do in Flutter side but to configure the API setting in your project. – Hao-Cher Hong Jul 25 '21 at 10:40

1 Answers1

3

try that:

1- Go to flutter\bin\cache and remove a file named: flutter_tools.stamp

2- Go to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart.

3- Find '--disable-extensions'

4- Add '--disable-web-security'.

How to solve flutter web api cors error only with dart code?

if does not work, try those commands

flutter run -d chrome --web-renderer html // to run the app

flutter build web --web-renderer html --release // to generate a production build