CORS flutter web

10

我有一个大问题,导致我项目延迟了。我遇到了CROS问题,它阻止我的请求,我无法解决它。我添加了以下代码到我的 .htaccess 文件中,但它没有起作用,我无法理解原因。

跨域请求被阻止:同源策略不允许读取远程资源在https://maps.googleapis.com/maps/api/place/autocomplete/json...nents=country:fr&key=MY_KEY。(原因:缺少CORS头‘Access-Control-Allow-Origin’)

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>

我不认为这是源于我的代码,但我会放在下面:

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());
}

2
我无法从Flutter Web中进行调用... 我唯一的选择是创建一个Firebase函数并将数据发送到Firestore以供使用。 - Mariano Zorrilla
嗨@dafep,你成功让它工作了吗?由于我的项目有一些限制,我无法真正创建一个Firebase函数。 - atreeon
同样的问题在这里。这对需要尽快解决方案的Flutter Web开发人员来说是一个令人沮丧的问题。 - Anthony D.
你能否检查一下你的API密钥是否有任何限制,比如: https://youtu.be/2_HZObVbe-g - Hao-Cher Hong
CORS头完全由Google API服务器控制。您的浏览器读取这些头文件并决定是否允许您的应用程序使用响应。它不受您的应用程序控制,而是由浏览器控制,因此在Flutter方面,除了在项目中配置API设置外,您无法做任何事情。 - Hao-Cher Hong
1个回答

3

请尝试以下步骤:

1- 进入flutter\bin\cache目录并删除一个名为:flutter_tools.stamp的文件。

2- 进入flutter\packages\flutter_tools\lib\src\web目录并打开chrome.dart文件。

3- 查找'--disable-extensions'

4- 添加'--disable-web-security'。

如何使用Dart代码解决Flutter Web API跨域错误?

如果不起作用,请尝试以下命令

flutter run -d chrome --web-renderer html // 运行应用程序

flutter build web --web-renderer html --release // 生成生产版本


为我工作。 - Noryn Basaya
为我工作。 - undefined

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接