Firebase 托管的 Flutter Web/Dart 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 的东西？ 我看到了这个，但我无法让它工作。
• 或者有另一种设置标题的方法吗？

Answer 1

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

跨源资源共享 (CORS) 是一种允许来自不同来源的资源之间进行交互的机制，这通常是为了防止恶意行为而被禁止的。

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

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

配置它们后，您不应再面临这两个错误，因为通过 HTTP 的请求将通过 CORS 进行授权，并且应该建立对 Firebase 的访问。

如果这些信息对您有帮助，请告诉我！

Answer 2

所以我和你一样，并不真的想创建 Cloud Functions 来解决这个问题。 我发现可以在 firebase 上编辑 CORS 配置。 这很复杂：

您需要安装 gsutil，对其进行授权，然后编辑 CORS 配置。

您可以在官方 firebase 页面上找到更多信息