获取对 AWS S3 存储桶的 AJAX 请求的 CORS 错误答案

【问题标题】：Getting CORS error on AJAX request to AWS S3 bucket获取对 AWS S3 存储桶的 AJAX 请求的 CORS 错误
【发布时间】：2021-01-20 15:28:42
【问题描述】：

这是一家 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();
      }
    }
  });
}

这就是 Bucket Policy 的样子...

{
    "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

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

【问题讨论】：

当您在 Safari 中收到 CORS 错误时，响应的 HTTP 状态代码是什么？您可以使用 Safari Web Inspector 中的网络面板进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？
谢谢@sideshowbarker。既不是 2xx 也不是 4xx 错误。实际上是 304。请注意，如果我直接将图像 URL 添加到 HTML 中的 src，无论是编程还是硬编码，都可以正常工作。问题是，在检查图像是否实际存在的 javascript 上，有时会返回成功，有时会返回“Access-Control-Allow-Origin 不允许”。

标签： amazon-s3 cors

【解决方案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()
    { 
       ...
    }

【讨论】：