解決 GCP storage 取得資料發生 blocked by CORS policy

解決 GCP storage 取得資料發生 blocked by CORS policy

透過 GCP Storage 儲存檔案，在前端呈現時出現了 CORS 問題

錯誤訊息： Access to fetch at url from origin url has been blocked by CORS policy: NO ‘Access-Control-Allow-Origin’ header is present on the requested resource. …

原因是在於，GCP Storage 為了預防惡意取用而預設不開啟。

這裡紀錄如何透過 Gsutil 開啟 GCP storage 跨域請求

首先，登入 GCP 開啟 Cloud shell

檢查 storage 是否有設定 cors

首先，先在 storage 查看 storage 的 gsutil 連結

透過以下指令取得 cors 設定狀況

gsutil cors get gs://example

如果未設定，會得到以下訊息

gs://example/ has no CORS configuration.

建立設定檔

vim cors-json-file.json

貼上以下內容：

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

如果要限制請求網址來源，可以在 origin 將 * 改成網址

套用設定

gsutil cors set cors-json-file.json gs://example

套用完成後，再次檢查 cors 設定

gsutil cors get gs://example

//取得以下回應表示設定完成
[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD", "DELETE"], "origin": ["*"], "responseHeader": ["Content-Type"]}]

其他變更 cors 方式，可以參考官方說明 https://cloud.google.com/storage/docs/configuring-cors?hl=zh-tw