Flutter Web/Dart 在使用 Firebase Hosting 时出现 CORS 错误

Question

问题

我在Flutter Web中编写了一个应用程序。当我在浏览器中运行它（调试模式），我收到以下错误：

cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.googleapis.com/identityto...

当我以发布模式运行它时，只会得到以下结果：

Error while fetching an original source: NetworkError when attempting to fetch resource.
Source URL: org-dartlang-sdk:///sdk/lib/_internal/js_runtime/lib/js_helper.dart

其他信息

• 该应用程序托管在Firebase Hosting中，但在没有Firebase的情况下也会出现错误
• 我认为问题在于两种情况下的cors，但发布模式只有较少的日志

我尝试过的

根据此文档或此问题, 我需要使用Expressjs添加一些内容：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({ origin: true }));

• 在Dart/Flutter中是否有类似于Expressjs的东西？我看到了这个，但我无法让它工作。
• 或者还有其他设置头信息的方法吗？

- Stein.

---

感谢您使用[编辑]按钮。请避免发布关于同一问题的多个问题，以及为他人创造工作。干杯。 - M--

Answer 1

看起来确实，CORS阻止您使用Firebase存储和访问数据。根据文档配置跨源资源共享（CORS）：

引用： 跨源资源共享（CORS）是一种允许来自不同来源的资源进行交互的机制，通常为了防止恶意行为而被禁止。

考虑到这一点，您需要配置您的工作方式并接受通过HTTP发出的请求。我建议您查看上面的文档和以下链接，以便获取更多信息。

• 在Firebase的Cloud Functions中启用CORS
• 通过HTTP请求调用函数

一旦您对它们进行了配置，您就不应再遇到这两个错误，因为通过HTTP的请求将通过CORS授权，对Firebase的访问应该被建立。

如果信息有帮助，请告诉我！

- gso_gabriel

---

非常感谢您的帮助。尽管我已经查看了所有内容，但我认为我应该在JavaScript中添加以下代码：const express = require('express'); const cors = require('cors')({origin: true}); const app = express(); app.use(cors({ origin: true }));。然而，我没有编写任何JS代码，它全部都是用Flutter编写的。我不知道如何将其添加到我的应用程序中。我也找不到有关如何为从Flutter发出的所有HTTP请求设置CORS的文档。 - Stein.

嗨@Stein。 这个问题here 提供了有关Flutter上的CORS的更多澄清。此外，如果您想检查Firebase侧是否配置正确，我建议您查看我在答案中提到的有关启用Firebase上的CORS的文档。 - gso_gabriel

Answer 2

我之前遇到和你一样的问题，不太想使用云函数来解决。后来发现在 Firebase 上有可能编辑 CORS 配置。需要进行以下步骤：

首先需要安装 gsutil，并进行授权，然后再进行 CORS 配置的编辑。

更多详细信息请查看Firebase 官方页面

- Neifen