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 頁面上找到更多信息