时间戳

首页 > 解决方案 > 获取对 AWS S3 存储桶的 AJAX 请求的 CORS 错误

amazon-s3 - 获取对 AWS S3 存储桶的 AJAX 请求的 CORS 错误

问题描述

这是一个从公共 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 错误：不允许访问

修复 AWS API 网关不存在的 CORS“对预检的响应 ...”标头并放大

调用 AWS Lambda 时，Chrome 忽略 Access-Control-Allow-Origin 标头并因预检错误导致 CORS 失败

Cloudfront 使用签名 URL 获取 S3 对象的间歇性 403 CORS 错误（访问控制允许来源）

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

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

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

标签： amazon-s3cors

解决方案

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

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

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

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

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

如何防止 jQuery Ajax 请求在 Internet Explorer 中缓存？

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

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

推荐阅读