CORS 颤动网络

Posted 2023-02-23

【中文标题】CORS 颤动网络

【英文标题】：CORS flutter web

【发布时间】：2020-06-12 21:31:55

【问题描述】：

我有一个大问题让我的项目迟到了我有 CROS 问题阻止我的请求我无法纠正它，我在我的 .htacess 中添加了下面的行，但它不起作用我不能'没看懂

跨源请求被阻止：同源策略不允许读取位于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 %AccessControlAllowOrigine 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());

【问题讨论】：

我无法从 Flutter Web 进行调用...我唯一的选择是创建一个 Firebase 函数并将数据发送到 Firestore 以供使用。

嗨@dafep，你设法让它工作了吗？由于项目的一些限制，我无法真正制作 Firebase 函数

这里有同样的问题。这对于需要尽快解决的 Flutter-web 开发人员来说是个遗憾。

您能否检查一下您的 API 密钥是否有任何限制，例如：youtu.be/2_HZObVbe-g

cors 标头完全由 Google API 服务器控制。您的浏览器会读取这些标头并决定是否让您的应用使用响应。它不是由您的应用程序而是由浏览器控制的，因此您在 Flutter 端无能为力，只能在您的项目中配置 API 设置。

【参考方案1】：

试试看：

1- 转到flutter\bin\cache 并删除一个名为：flutter_tools.stamp 的文件

2- 转到flutter\packages\flutter_tools\lib\src\web 并打开文件chrome.dart。

3- 查找'--disable-extensions'

4- 添加“--disable-web-security”。

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

如果不起作用，请尝试这些命令

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

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