云存储 - AngularJS 视图的请求资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】云存储 - AngularJS 视图的请求资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Cloud Storage - No 'Access-Control-Allow-Origin' header is present on the requested resource for AngularJS view

【发布时间】：2016-07-03 00:09:32

【问题描述】：

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

[
    
      "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?. 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() 来处理脚本？

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

【问题讨论】：

如果你在你的存储桶上设置了这个策略然后直接点击它，比如通过curl -H "Origin: https://site-name-here.com" https://storage.googleapis.com/bucket-name/view-path.thml，你看到标题了吗？我只是尝试使用该确切的 JSON 文件复制此问题，并且每次在我的请求中包含原始标头时都会看到标头，正如预期的那样。

嗯，它现在也在浏览器中工作。即使我刷新了我的 Chrome 缓存，我猜也有一些东西被缓存了。

您可能需要考虑添加一个自我回答，其中包含您的结果和理论，说明它发生的原因。

相关：如果您设置了无效策略，gsutil cors set 似乎不会警告您。例如，我们忘记包含 responseHeader 键和 gsutil 未能告诉我们存在问题。

【参考方案1】：

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

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

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

【参考方案2】：

事实上，这类问题可以通过清除浏览器或其他中间服务的缓存来解决。

如果您的应用程序在 Google App Engine 实例上运行，则可以通过重新部署应用程序的新版本来清除其中间缓存。或者，也可以设置缓存在 Web 代理和浏览器中的文件的 default_expiration 或简单的 expiration（有关更多信息，请参阅 app.yaml 参考的静态缓存过期 section）。

【参考方案3】：

作为通过 Google 找到此问题的人们的总结，应用 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 测试您的请求，您最终会看到您正在寻找的标头：

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

一旦生效，请限制您实际使用的来源和方法，这样您就不会关注新闻和/或拥有惊人的巨额带宽费用。

如果您已完成此操作但仍有问题，请尝试将具有新名称的对象上传到存储桶（即 100% 未在任何地方缓存）进行测试。

【参考方案4】：

以下内容对我有用：

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

【参考方案5】：

如果缓存是问题，试试这个。

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

Viewing and editing object metadata

缓存可能会在网络中的某个位置保留一段时间。

【参考方案6】：

这对我有用。我使用 gsutil 为我的 GCP 存储桶设置此 CORS 策略。在设置 cors 策略后尝试删除 Angular Web 应用程序的缓存以获取更多信息，请参阅here。

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