云存储 - AngularJS 视图的请求资源上不存在“Access-Control-Allow-Origin"标头 [英] Cloud Storage - No 'Access-Control-Allow-Origin' header is present on the requested resource for AngularJS view

问题描述

根据 Chrome 开发工具，我获取 html 部分的请求具有原始标头 https://site-name-here.com 并请求标头 GET.
我的存储桶中设置了以下 JSON 文件:

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.
I have the following JSON file set to my bucket:

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

但是，每当 angular 尝试获取视图时，我都会收到以下错误:XMLHttpRequest cannot load https://storage.googleapis.com/bucket-name/view-path.html?.请求的资源上不存在Access-Control-Allow-Origin"标头.因此不允许访问来源https://site-name-here.com".

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.

我还提供来自 Cloud Storage 的 javascript 和 css 文件，但它们工作正常，我认为是因为 CSS 没有 CORS 限制，并且我在 Angular 中使用 $sceDelegateProvider.resourceUrlWhitelist() 来处理脚本?

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?

编辑:现在工作，我假设某些内容已被缓存，并且正在为我提供旧版本.

Edit: Working now, I'm assuming something was cached and it was serving me an old version.

推荐答案

只是为了支持@Idcmp 的回答，CORS 策略确实需要一段时间才能完全生效(这没有记录在案).我花了大约 2 个小时试图弄清楚为什么我仍然在浏览器中收到 CORS 错误，即使我使用了以下策略(强烈不推荐，但它对我的个人测试项目来说很好).

Just to support @Idcmp's answer, the CORS policy does take a while before taking full effect (this is not documented tho). I've spent ~2 hours trying to figure out why I'm still getting CORS error in browser even though I use the below policy (which is highly NOT recommended, but it's fine for my personal testing project).

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

ps 在应用新的 CORS 政策后喝杯咖啡，你绝对值得拥有它

ps Take a coffee break after applying a new CORS policy, you definitely deserve it

这篇关于云存储 - AngularJS 视图的请求资源上不存在“Access-Control-Allow-Origin"标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！