關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

解決 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


如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦