在向AWS S3 bucket发出AJAX请求时获取CORS错误

Question

这是一个从公共S3存储桶中提取图像的Shopify商店。javascript函数通过AJAX检查图像是否存在，然后将它们放在阵列上以在渲染产品时使用：

function set_gallery(sku) {
var bucket = 'https://[xbucket].s3.amazonaws.com/img/sku/';
var folder = sku.slice(0,4);
var nombre = sku.replace(' SG OPT ', '');
var nombre = nombre.replace(' ', '');
var idx='';
var ciclo = variant_gallery.attempts;
var fallos = variant_gallery.failed;
if (ciclo > 0) { 
idx = '-'+ciclo; 
}
var picURL = bucket+folder+'/'+nombre+idx+'.jpg';
$.ajax({
url:picURL,
type:'GET',
error: function()
{
fallos++;
ciclo++;
variant_gallery.failed = fallos;
variant_gallery.attempts = ciclo;
if ( fallos < 2 ) { 
set_gallery(sku); 
} else {
variant_gallery.isReady = true;
build_gallery();
}
},
success: function()
{
ciclo++;
variant_gallery.attempts = ciclo;
variant_gallery.gallery_urls.push(picURL);
if ( ciclo < 15 ) { 
set_gallery(sku); 
} else {
variant_gallery.isReady = true;
build_gallery();
}
}
});
}

这就是水桶政策的样子。。。

{
"Version": "2012-10-17",
"Id": "Policy1600291283718",
"Statement": [
{
"Sid": "Stmt1600291XXXXXX",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::[xbucket]/img/sku/*"
}
]
}

和CORS配置。。。

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

问题是，在Chrome上，它大约98%的时间都能按预期渲染(每50次尝试一次错误(，但在Safari中，我大约每两三次尝试就会出现一次CORS错误：

Origin https://shopifystore.com is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load https://[bucket].s3.amazonaws.com/img/sku/image-to-load.jpg due to access control checks.

我该怎么做才能让它在Safari中像在Chrome中一样一致？希望比这更可靠。

我已经检查了其他SO问题：

AWS S3铲斗：CORS配置

AWS S3 CORS错误：不允许访问

固定CORS"；飞行前的反应"AWS API网关不存在标题，并放大

Chrome正在忽略Access Control Allow Origin标头，并在调用AWS Lambda 时因飞行前错误导致CORS失败

Cloudfront使用签名URL获取S3对象时出现间歇性403 CORS错误(访问控制允许来源(

跨来源请求AJAX对AWS S3的请求有时会导致CORS错误

缓存的非CORS响应与新的CORS请求冲突

其中一些不适用于这种情况。其他一些我尝试过，但没有成功。

Answer 1

在阅读了几种可能的解决方案后，我终于用它们的组合解决了问题。事实证明，这是一个缓存问题，如图所示：

跨来源请求AJAX对AWS S3的请求有时会导致CORS错误

缓存的非CORS响应与新的CORS请求冲突

我首先尝试了这个解决方案，但没有用Jquery正确实现，我只是采取了另一种方法。

几个小时后，为了避免jQuery AJAX上的缓存，尝试了这个解决方案：

如何防止jQueryAjax请求在InternetExplorer中缓存？

最后只添加了一行代码就解决了：

$.ajax({
url:picURL,
type:'GET',
cache: false, // <- do this to avoid CORS on AWS S3
error: function()
{ 
...
}