XMLHttpRequest 无法加载请求的资源上不存在“Access-Control-Allow-Origin”标头。 AWS S3，视网膜.JS

Posted 2023-03-04

【中文标题】XMLHttpRequest 无法加载请求的资源上不存在“Access-Control-Allow-Origin”标头。 AWS S3，视网膜.JS

【英文标题】：XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. AWS S3, Retina.JS

【发布时间】：2014-04-12 22:32:04

【问题描述】：

我试图让retina.js 在我们的网站上运行，其中的作品集文章由ajax 加载。

因此，retina.js 似乎试图获取图像，但留下了典型的

XMLHttpRequest cannot load http://assets.url.com/images/[e-mail]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://url.com' is therefore not allowed access. 

我正在运行 nginx，它有访问控制设置，但显然它也需要在 S3 上设置，而且它......很好，像这样打开......

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我尝试了包括特定 URL 在内的变体，但仍然收到相同的错误消息。

任何人都知道这里的错误可能是什么，也许我们的设置根本没有设置请求标头？也许我们的 ajax 网格干扰了retina.js？一旦设置了上述代码，retina.js 网站上就没有提到需要任何特殊配置。

如果这有什么不同的话，我们也将 Cloudflare 用于 DNS，尽管此时一切都已关闭。

【参考方案1】：

问题在于retina.js 的工作方式。感谢github上的这个替代版本，终于找到了解决方案。

https://github.com/chrishunt/retinajs/blob/master/src/retina.js

【讨论】：

有没有机会分享一下修复的具体内容？很难从那一点 JS 中分辨出来；我什至没有看到任何 AJAXy 请求。

同意@jeffbyrnes，不知道为什么“官方”retina.js 无法实现此修复。

【参考方案2】：

在使用 Rails 应用程序和 aws-sdk gem 时遇到了同样的问题和设置。 目标：通过 jQuery FileUpload 插件将文件直接上传到 S3。即使在我的 S3 存储桶上正确设置了 CORS，也无法解决上述错误。

我忽略的一件事：按照教程进行操作时，我将Aws.config.update( region: eu-west-1 ) 设置为config/initializers/aws.rb。 但是，我在 AWS 上创建的 S3 存储桶实际上是在 eu-central-1 区域中。

解决方案：将 Aws.config.update 初始化程序设置为您之前在 S3 控制台中选择的同一区域 :)