![](/img/trans.png)
[英]CloudFront is not correctly passing back the Access-Control-Allow-Origin header from S3
[英]S3 - Access-Control-Allow-Origin Header
有没有人设法将Access-Control-Allow-Origin
添加到响应标头? 我需要的是这样的:
<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />
此获取请求应包含在响应中,header, Access-Control-Allow-Origin: *
我的存储桶 CORS 设置如下所示:
<?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>
如您所料,没有Origin
响应 header。
通常,您需要做的就是在您的存储桶属性中“添加 CORS 配置”。
<CORSConfiguration>
带有一些默认值。 这就是我解决您的问题所需的全部内容。 只需单击“保存”,然后再试一次,看看它是否有效。 如果没有,您也可以尝试下面的代码(来自 alxrb 的答案),它似乎对大多数人都有效。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
有关更多信息,您可以阅读有关Editing Bucket Permission 的这篇文章。
我在加载 Web 字体时遇到了类似的问题,当我在存储桶属性中单击“添加 CORS 配置”时,此代码已经存在:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
我只是点击了保存,它工作得很好,我的自定义网络字体正在 IE 和 Firefox 中加载。 我不是这方面的专家,我只是想这可能会帮助你。
S3 现在期望规则采用 Array Json 格式。
您可以在 s3 存储桶中找到它 -> 权限然后 -> 向下滚动 -> () 跨域资源共享 (CORS)
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
如果您的请求未指定Origin
标头,S3 将不会在响应中包含 CORS 标头。 这真的让我很失望,因为我一直试图卷曲文件以测试 CORS,但 curl 不包括Origin
。
@jordanstephens 在评论中这么说,但它有点迷失了,对我来说是一个非常简单的解决方案。
我只是添加了 HEAD 方法并单击保存并开始工作。
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <!-- Add this --> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
我知道这是一个老问题,但仍然很难找到解决方案。
首先,这对我使用 Rails 4、Paperclip 4、CamanJS、Heroku 和 AWS S3 构建的项目很有效。
您必须使用crossorigin: "anonymous"
参数请求您的图像。
<img href="your-remote-image.jpg" crossorigin="anonymous">
将您的站点 URL 添加到 AWS S3 中的 CORS。 这是亚马逊对此的参考。 差不多,只需转到您的存储桶,然后从右侧的选项卡中选择“属性”,打开“权限”选项卡,然后单击“编辑 CORS 配置”。
最初,我将
< AllowedOrigin>
设置为*
。 只需将该星号更改为您的 URL,确保在单独的行中包含诸如http://
和https://
类的选项。 我期待星号接受“全部”,但显然我们必须比这更具体。
这就是它对我的看法。
见上面的答案。 (但我也有一个 chrome 错误)
不要在 CHROME 页面上加载和显示图像。 (如果您稍后要创建一个新实例)
就我而言,我加载了图像并将它们显示在页面上。 当它们被点击时,我创建了它们的一个新实例:
// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
context.drawImage(img, 0, 0)
context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it
Chrome 已经缓存了另一个版本,并且从未尝试重新获取crossorigin
版本(即使我在显示的图像上使用crossorigin
。
为了修复,当我为画布加载它时,我将?crossorigin
添加到图像 url 的末尾(但您可以添加?blah
,更改缓存状态只是任意的)。如果您找到更好的 CHROME 修复程序,请告诉我
我将添加到这个答案 -以上 - 解决了我的问题。
要将 AWS/CloudFront Distribution Point 设置为朝向 CORS Origin Header,请单击 Distribution Point 的编辑界面:
转到行为选项卡并编辑行为,将“基于选定请求标头的缓存”从无更改为白名单,然后确保将Origin
添加到白名单框中。 有关更多信息,请参阅 AWS 文档中的配置 CloudFront 以遵守 CORS 设置。
我在将 3D 模型从 S3 加载到 javascript 3D 查看器 (3D HOP) 时遇到了类似的问题,但奇怪的是,只有某些文件类型 (.nxs)。
为我修复的是在 CORS 配置AllowedHeader
从默认Authorization
更改为*
:
<?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>
就像其他人所说的那样,您首先需要在 S3 存储桶中进行 CORS 配置:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
但是在我这样做之后,它仍然无法正常工作。 我正在使用 Chrome(可能与其他浏览器存在相同的问题)。
问题是Chrome 正在缓存带有标头(不包含 CORS 数据)的图像,所以无论我尝试在 AWS 中更改什么,我都不会看到我的 CORS 标头。
清除 Chrome 缓存并重新加载页面后,图像具有预期的 CORS 标头
我到达了这个线程,结果证明上述解决方案都不适用于我的案例。 事实证明,我只需要从存储桶的 CORS 配置中的<AllowedOrigin>
URL中删除尾部斜杠<AllowedOrigin>
。
失败:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.mywebsite.com/</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
获胜:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.mywebsite.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
我希望这可以节省一些人的头发。
我尝试了上面的所有答案,但没有任何效果。 实际上,我们需要将上述答案的 3 个步骤结合起来才能使其工作:
正如弗拉维奥所建议的那样; 在您的存储桶上添加 CORS 配置:
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>
在图像上; 提到跨域:
<img href="abc.jpg" crossorigin="anonymous">
你在使用 CDN 吗? 如果一切正常,连接到源服务器但不是通过 CDN; 这意味着您需要在 CDN 上进行一些设置,例如接受 CORS 标头。 确切设置取决于您使用的 CDN。
首先,激活 S3 存储桶中的 CORS。 使用此代码作为指导:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://www.example1.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>http://www.example2.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
2)如果它仍然不起作用,请确保还在您的 img 标签中添加一个带有“*”值的“crossorigin”。 把它放在你的 html 文件中:
let imagenes = document.getElementsByTagName("img");
for (let i = 0; i < imagenes.length; i++) {
imagenes[i].setAttribute("crossorigin", "*");
在权限设置中为您的 S3 存储桶设置 CORS 配置
<?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>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
仅当 http 请求具有Origin
标头时,S3 才会添加 CORS 标头。
CloudFront 默认不转发Origin
标头
您需要在 CloudFront 分配的行为设置中将Origin
标头列入白名单。
我修复了它,写了以下内容:
<?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>
为什么<AllowedHeader>*</AllowedHeader>
有效而<AllowedHeader>Authorization</AllowedHeader>
无效?
这个配置为我解决了这个问题:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
fwuensche "answer" 是建立 CDN 的正确方法; 这样做,我删除了 MaxAgeSeconds。
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
在最新的 S3 管理控制台中,当您单击权限选项卡上的 CORS 配置时,它将显示默认示例 CORS 配置。 这种配置其实并不活跃,但是! 您必须先单击保存才能激活 CORS。
我花了很长时间才弄明白这一点,希望这能节省一些时间。
警告 - 黑客。
如果您使用 S3Image 显示图像并随后尝试通过 fetch 获取它,也许将其插入 PDF 或进行其他处理,请注意 Chrome 将缓存不需要 CORS 预检请求的第一个结果,并且然后尝试在没有预检 OPTIONS 请求的情况下获取相同的资源,并且由于浏览器限制而失败。
解决此问题的另一种方法是确保 S3Image 包含如上所述的 crossorigin: 'use-credentials'。 在您使用 S3Image 的文件中,(我有一个组件可以创建 S3Image 的缓存版本,所以这对我来说是完美的地方),覆盖 S3Image 的原型 imageEl 方法以强制它包含此属性。
S3Image.prototype.imageEl = function (src, theme) {
if (!src) {
return null;
}
var selected = this.props.selected;
var containerStyle = { position: 'relative' };
return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};
403问题现已解决。 多么痛苦啊!
<AllowedOrigin>*</AllowedOrigin>
不是一个好主意,因为使用 * 您可以授予任何网站访问存储桶中文件的权限。 相反,您应该指定完全允许哪个源使用您的存储桶中的资源。 通常,那是您的域名,例如
<AllowedOrigin>https://www.example.com</AllowedOrigin>
或者如果您想包含所有可能的子域:
<AllowedOrigin>*.example.com</AllowedOrigin>
以下是配置,对我来说很好。 我希望它有助于解决您在 AWS S3 上的问题。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
更新 CORS 配置后,还请清理浏览器的缓存。 我的工作是在清洁 cachw 后与 Strapi 一起工作
S3 现在需要 Javascript Object 符号格式。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
我建议根据您的要求更改 AllowedOrigins 和 AllowedMethods。
接受的答案有效,但似乎如果您直接转到资源,则没有跨域标头。 如果您使用的是 cloudfront,这将导致 cloudfront 缓存没有标题的版本。当您转到加载此资源的不同 url 时,您将遇到此跨域问题。
就我而言,我首先使用以下配置解决它,转到权限,然后转到跨域资源共享(CORS),然后单击编辑并粘贴以下代码...
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://www.example1.com"
],
"ExposeHeaders": []
},
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://www.example2.com"
],
"ExposeHeaders": []
},
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
单击此处了解更多信息
如果您的 CORS 设置对您没有帮助。
验证配置S3是否正确。 我在Storage.configure
有一个无效的存储桶名称。 我使用了bucket的简称,它导致了一个错误:
请求的资源上不存在“Access-Control-Allow-Origin”标头。
对于它的价值,我遇到了类似的问题 - 在尝试添加特定的允许来源(不是*
)时。
原来我不得不纠正
<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>
到
<AllowedOrigin>http://mydomain:3000</AllowedOrigin>
(注意 URL 中的最后一个斜杠)
希望这有助于某人
上面的大多数答案都不起作用。 我试图使用 react-s3 将图像上传到 S3 存储桶,我得到了这个
跨域请求被阻止
错误。
您所要做的就是在 s3 Bucket 中添加 CORS Config 转到 S3 Bucket -> 权限 -> CORS 配置并粘贴以下内容
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
将 * 替换为您的网站网址。 参考: AWS CORS 设置
我遇到了类似的问题, coderVishal 的回答帮助我解决了这个问题,但就我而言,我需要使用具有下一个配置的 Terraform:
resource "aws_s3_bucket" "bucket" {
bucket = var.bucket
acl = "public-read"
# Cross-origin resource sharing (CORS)
cors_rule {
allowed_headers = ["*"]
allowed_methods = ["GET", "HEAD"]
allowed_origins = ["*"]
expose_headers = []
max_age_seconds = 3000
}
}
在文档中阅读更多关于cors_rule
参数的信息。
对我来说,不添加区域
const s3 = new aws.S3({ apiVersion: '2006-03-01', region: 'us-west-2' });
当前的答案已经过时了。 所以这里是我的分享:
首先,您需要在 AWS S3 存储桶上设置 CORS
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"http://*",
"https://*"
],
"ExposeHeaders": [
"Access-Control-Allow-Origin",
"ETag"
],
"MaxAgeSeconds": 3000
}
]
只是关于 S3 的 CORS 的注释。 应用策略时,存储桶中已有的文件不会更新。 因此,请确保仅将 CORS 策略应用于新存储桶,或在应用策略后重新添加内容。 旧内容不会受到新 CORS 政策的影响
亚马逊 S3 如何评估 CORS?
对于最后一步,您还需要清除浏览器上的缓存,因为浏览器可能会缓存以前的飞行前请求
我尝试了很多解决方案来解决这个问题,但最后,我只是这样做了
url.replace(/^https:\/\//i, "http://");
我不知道为什么,但这对我有用。 如果您要从 s3 存储桶中以“BLOB”的形式获取图像,请执行此操作。
我最近遇到了同样的问题,似乎 AWS 对我们定义 CORS 配置的方式进行了一些更改。 例如,如果您过去想在 S3 存储桶上允许某些方法,您必须在编辑器上执行如下操作:
下面的配置等同于顶部的配置,但采用数组的形式。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"HEAD",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.