Question

这是Shopify商店，它从公共S3存储桶中提取图像。一个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 bucket: CORS Configuration

AWS S3 CORS Error: Not allowed access

Fix CORS "Response to preflight..." header not present with AWS API gateway and amplify

Chrome is ignoring Access-Control-Allow-Origin header and fails CORS with preflight error when calling AWS Lambda

Intermittent 403 CORS Errors (Access-Control-Allow-Origin) With Cloudfront Using Signed URLs To GET S3 Objects

Cross-origin requests AJAX requests to AWS S3 sometimes result in CORS error

Cached non CORS response conflicts with new CORS request

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

Answer 1

在阅读了几种可能的解决方案之后，我终于将这些解决方案混合在一起解决了。事实证明，这是一个缓存问题，如下所示：

Cross-origin requests AJAX requests to AWS S3 sometimes result in CORS error

Cached non CORS response conflicts with new CORS request

我首先尝试了该解决方案，但没有正确地使用Jquery进行实施，而我只是采取了另一种方式。

然后尝试使用此解决方案几个小时，以避免在jQuery AJAX上缓存：

How to prevent a jQuery Ajax request from caching in Internet Explorer?

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

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

在对AWS S3存储桶的AJAX请求中获得CORS错误

1 个答案: