Firebase 托管的 Flutter Web/Dart CORS 错误答案

【问题标题】：Flutter Web/Dart CORS Error with Firebase HostingFirebase 托管的 Flutter Web/Dart CORS 错误
【发布时间】：2020-06-04 03:29:39
【问题描述】：

问题

我在 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 托管中，但在没有 Firebase 的 localhost 上也会出现错误
我认为这两种情况都存在问题，但发布模式的日志较少

我尝试了什么

根据this 文档或this 问题，我必须使用 Expressjs 添加一些内容，例如：

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

在 Dart/Flutter 中有没有类似 Expressjs 的东西？我看到了this，但我无法让它工作。
或者有没有其他方法来设置标题？

【问题讨论】：

感谢您使用edit 按钮。请避免就同一问题发布多个问题并为他人创造工作。干杯。

标签： firebase dart cors firebase-hosting flutter-web

【解决方案1】：

看来，CORS 确实阻止了您使用 Firebase 存储和访问数据。根据文档Configuring cross-origin resource sharing (CORS):

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

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

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

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

【讨论】：

非常感谢您的帮助。不过看了所有这些，我认为我应该在 Javascript 中添加 const express = require('express'); const cors = require('cors')({origin: true}); const app = express(); app.use(cors({ origin: true })); 和 express。虽然我没有写任何 JS 代码。这一切都是用 Flutter 编写的。我不知道如何将其添加到我的应用程序中。我也找不到任何关于如何为 Flutter 发出的所有 http 请求设置 cors 的文档。
嗨@Stein。这个问题here 提供了有关 Flutter 上 CORS 的更多说明。除此之外，如果您想检查 Firebase 端的所有配置是否正确，我建议您查看我在回答中提到的关于在 Firebase 上启用 CORS 的文档。

【解决方案2】：

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

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

您可以在official firebase page 上找到更多信息

【讨论】：