Flutter firebase 存儲 CORS 問題

Question

我正在使用 firebase 存儲的免費計划。 一切正常，但圖像未加載到我的 flutter web 上。

我收到這個錯誤。

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/sap-app-8318e.appspot.com/o/cover%2Fimage_cropper_028D7F16-0161-4E90-B40D-EE47D310F322-5339-000003697F67306C.jpg?alt=media&token=313475a9-9728-4e61-97da-f5d5534bb008' from origin 'https://sap.nextcardpro.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
firebasestorage.googleapis.com/v0/b/sap-app-8318e.appspot.com/o/cover%2Fimage_cropper_028D7F16-0161-4E90-B40D-EE47D310F322-5339-000003697F67306C.jpg?alt=media&token=313475a9-9728-4e61-97da-f5d5534bb008:1

我在谷歌上搜索了每個人都告訴需要允許 CORS 從 firebase 訪問，但我怎么能添加它。 但是如何將它添加到我的免費 firebase 計划中？

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

Answer 1

最后，經過2天的谷歌搜索，通過這篇文章解決。

https://bitmovin.com/docs/encoding/faqs/how-do-i-set-up-cors-for-my-google-cloud-storage-bucket

Answer 2

來自以上鏈接的回答：

如果您已經熟悉 Google Cloud 服務和工具，例如 gcloud 和/或 gsutil，您還可以查看 Google 關於 CORS 的文檔。

登錄到您的谷歌雲控制台： https://console.cloud.google.com/home 。 點擊右上角的“Activate Google Cloud Shell”（見下圖）：

在 window 的底部，將顯示 shell 終端，其中 gcloud 和 gsutil 已經可用。 執行如下所示的命令。 它會創建一個 json 文件，用於設置存儲桶的 cors 配置。 此配置將允許每個域在瀏覽器中使用 XHR-Requests 訪問您的存儲桶： echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

如果要限制訪問一個或多個特定域，請將其 URL 添加到數組中，例如： echo '[{"origin": ["https://yourdomain.com"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

在以下命令中將YOUR_BUCKET_NAME替換為您的實際存儲桶名稱，以更新存儲桶中的 cors 設置gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME

要檢查一切是否按預期工作，您可以使用以下命令獲取存儲桶的 cors-settings： gsutil cors get gs://YOUR_BUCKET_NAME

您可以在項目的 Firebase 控制台的 Storage 面板中找到存儲桶 ID：

Firebase 控制台的存儲面板 是以gs://開頭的值。

Answer 3

如果有人在安裝 gsutil 時遇到問題。 它不適用於最新的 python 3.10。 您必須安裝以前的版本號以3.7開頭的版本

喜歡這個：下載 python 3.7.9

Answer 4

官方 Firebase 存儲答案可以在這里找到。 如果答案發生變化，可能會有用。 截至 2022 年 4 月，這與 Feroz 的回答基本相同。

Answer 5

我遇到了類似的問題，並且一如既往地花了幾個小時來解決，但解決方案一如既往地簡單易行。

當您運行此命令flutter run -d chrome --web-renderer canvaskit --no-sound-null-safety應用程序將運行並且一切正常且像素完美，但遺憾的是網絡圖像無法加載。 當您檢查應用程序查看控制台時，您會看到這個漂亮的錯誤

（被 CORS 策略阻止）：請求的資源上不存在“訪問控制：允許來源”header。

CORS 是什么？

CORS 代表（跨域資源共享）。 CORS 是一種瀏覽器安全功能，可限制從瀏覽器中運行的腳本發起的跨域 HTTP 請求。

現在如何解決 CORS 問題？ 並顯示來自任何其他域或 Firebase 存儲的圖像。 答案很簡單跟着我下面的步驟

1. 打開GCP 控制台，您將看到以下屏幕

2. 現在 select 您的項目並單擊儀表板按鈕。

3. 通過單擊頂部導航欄中的>_圖標按鈕啟動雲終端，如下圖所示

4. 單擊打開編輯器按鈕並（等待幾秒鍾）

5. 現在單擊 3 (...) 點並創建新文件並將其命名為cors.json如下圖所示

6. 復制並粘貼此代碼

   [ {“起源”：[“*”]，“方法”：[“GET”]，“maxAgeSeconds”：3600 }]

在您注意到的代碼中，我設置了原點* ，這意味着每個網站都可以顯示您的圖像。 但是您也可以在此處插入您網站的域以限制訪問。

7. Now run the command: gsutil cors set cors.json gs://your-bucket When you run gsutil cors set cors.json gs://your-bucket you will get beautiful error (' gsutil ServiceException: 401 Anonymous caller does not have storage.objects.list 訪問存儲桶') 這意味着您需要先登錄。

8. 運行此命令gcloud auth login並登錄到 gcloud

9. 現在再次運行此命令gsutil cors set cors.json gs://your-bucket

如果您想了解有關 CORS 的更多信息： https://cloud.google.com/storage/docs/configuring-cors