如何允许 a-frame 预览来自云端的图像（没有 CORS 策略）？答案

【问题标题】：How can i allow a-frame to preview images from cloudfront (without CORS policy)?如何允许 a-frame 预览来自云端的图像（没有 CORS 策略）？
【发布时间】：2019-10-25 08:22:05
【问题描述】：

我正在尝试使用 A-Frame 框架创建 360º 全景查看器当我尝试从云端获取图像时，我有一些 CORS 政策

我阅读了文档并在本地完成工作，并在我的项目中上传了一张图片。一切正常。

之后，我尝试动态获取我的图像，下载到 Cloudfront。我的控制台出现一个错误。

Access to image at 'https://d2l35xunnm47ff.cloudfront.net/...1553267992.jpg' from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

您可以在行动中展示问题 https://codepen.io/petitlardon/pen/ewYpGo

<a-scene>
  <a-assets>
    <img id="panorama" src="https://d2l35xunnm47ff.cloudfront.net/media/clients/5addae3a37e62a001bf297ef/3aabb43a-4b0d-4a02-9f0b-f023ceaaf3af-54086-0072-f-1553268090.jpg" crossorigin="anonymous" />
  </a-assets>
  <a-sky src="#panorama"></a-sky>
</a-scene>

感谢您的帮助

【问题讨论】：

标签： image amazon-cloudfront aframe

【解决方案1】：

Images must be served with CORS headers。查看 Cloudfront 文档以了解如何配置您的实例。如果它不是您管理的服务器，您无能为力，所有者不允许跨域请求。

【讨论】：

【解决方案2】：

我在尝试使用 AWS S3 和 CloudFront 流式传输视频时遇到了类似的问题。我能够通过以下步骤解决它：

按照以下建议在托管视频的 S3 存储桶上设置 CORS 权限：https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
使用以下建议更新源自上述存储桶的 CloudFront 分配的 Behaviour：https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors
确保在测试更改时清除浏览器的缓存。浏览器可能会缓存旧的 CORS 策略。我已经浪费了几个小时才得出这个结论并最终摆脱了这个错误。

【讨论】：