雲存儲 - AngularJS 視圖的請求資源上不存在“訪問控制允許來源”header

Question

According to Chrome dev tools, my requests to get my html partials have the origin header https://site-name-here.com and request header GET.
我將以下 JSON 文件設置到我的存儲桶中：

[
    {
      "origin": ["https://site-name-here.com"],
      "responseHeader": ["content-type"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

However, whenever angular tries to get the view, I get the following error: XMLHttpRequest cannot load https://storage.googleapis.com/bucket-name/view-path.html?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://site-name-here.com' is therefore not allowed access. XMLHttpRequest cannot load https://storage.googleapis.com/bucket-name/view-path.html?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://site-name-here.com' is therefore not allowed access.

I am also serving javascript and css files from Cloud Storage, but they're working fine, I assume because CSS doesn't have CORS restrictions and I'm using $sceDelegateProvider.resourceUrlWhitelist() in Angular for the scripts?

編輯：現在工作，我假設有些東西被緩存了，它為我提供了一個舊版本。

Answer 1

只是為了支持@Idcmp 的回答，CORS 政策確實需要一段時間才能完全生效（這沒有記錄在案）。 我花了大約 2 個小時試圖弄清楚為什么即使我使用以下策略仍然在瀏覽器中出現 CORS 錯誤（強烈不推薦這樣做，但對我的個人測試項目來說很好）。

{
    "cors": [
      {
        "origin": [
          "*"
        ],
        "method": [
          "*"
        ],
        "responseHeader": [
          "*"
        ],
        "maxAgeSeconds": 3600
      }
    ]
}  

ps 應用新的 CORS 政策后休息一下，你絕對值得

Answer 2

作為通過谷歌發現這個問題的人的總結，應用 CORS 策略似乎需要一些時間才能生效。 上面的答案表明這可能是由於中間緩存等 - 可能無法直接控制的事情。

如果可以，請應用允許通配符來源的 CORS 策略（通過gsutil ）並通過https://www.test-cors.org/或curl --verbose --output /dev/null -H "Origin: https://your.actual.origin.here" https://storage.googleapis.com/bucket/object測試您的請求curl --verbose --output /dev/null -H "Origin: https://your.actual.origin.here" https://storage.googleapis.com/bucket/object你最終會看到你正在尋找的標題：

< access-control-allow-origin: *
< access-control-expose-headers: Content-Length, Date, Server, Transfer-Encoding, X-GUploader-UploadID, X-Google-Trace

一旦它工作，限制你實際使用的來源和方法，這樣你就不會收到新聞和/或驚人的大帶寬賬單。

如果您已完成此操作但仍有問題，請嘗試將具有新名稱的對象上傳到存儲桶（即 100% 未緩存到任何地方）進行測試。

Answer 3

事實上，這種類型的問題可能會在清除瀏覽器或其他中間服務的緩存后得到解決。

如果您的應用程序在 Google App Engine 實例上運行，則可以通過重新部署應用程序的新版本來清除其中間緩存。 或者，也可以為 web 代理和瀏覽器中緩存的文件設置default_expiration或簡單expiration （有關更多信息，請參閱 app.yaml 參考的靜態緩存過期部分）。

Answer 4

以下讓它為我工作：

[
    {
      "origin": ["https://site-name-here.com"],
      "responseHeader": "*",
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

Answer 5

問題可能不是來自 CORS 配置，而是來自被 CORS 錯誤掩蓋的其他錯誤。

要排除配置問題，請使用以下命令檢查存儲桶的 CORS 配置 - gsutil cors get gs://BUCKET_NAME 。 如果您的配置可見，則絕對不是配置問題。

另一方面，CORS 可能會屏蔽雲存儲返回的其他4xx或5xx錯誤。 這是因為雲存儲返回的錯誤沒有設置訪問控制標頭。

要在瀏覽器上查看真正的4xx和5xx錯誤，請嘗試禁用 CORS 檢查。 許多插件可以幫助在 Chrome 上禁用 CORS。

Answer 6

如果緩存是問題，請嘗試此操作。

gsutil setmeta -h "Cache-Control:no-cache" gs://BUCKET_NAME/OBJECT_NAME

查看和編輯對象元數據

緩存可能會在網絡中的某處保留一段時間。

Answer 7

這對我有用。 我使用 gsutil 為我的 GCP 存儲桶設置了這個 CORS 策略。在設置 cors 策略后嘗試刪除 angular web 應用程序的緩存以獲取更多信息，請參見此處。

[
    {
      "origin": ["https://site-name-here.com"],
      "responseHeader": "Content-Type",
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

Answer 8

如果您有請求 + 預檢，您可能需要設置其他參數。

"responseHeader": ["Content-Type", "Origin", "Accept","Authorization","Content-Length", "X-Requested-With"],

https://mockoon.com/docs/latest/cors/

完整的 CORS 配置：

[
    {
      "origin": ["*"],
      "method": ["GET", "POST", "DELETE", "PUT", "HEAD"],
      "responseHeader": ["Content-Type", "Origin", "Accept","Authorization","Content-Length", "X-Requested-With"],
      "maxAgeSeconds": 3600
    }
]