Angular 从一台机器上工作的浏览器下载S3图像，并在另一台机器上给出CORS错误

我有一个Angular2应用程序，我正在尝试从S3下载一组图像，并将它们放在zip文件中。我正在使用下面的代码，这是我从

代码在Heroku应用程序上运行，奇怪的是，它在我的开发机器（chrome版本68.0.3440.106）上按预期工作，但在另一台机器（chrome版本69.0.3497.100）上会出现CORS错误。具体的CORS错误是

Failed to load url.for.image.in.s3.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource.  Origin 'https://myherokuapp.herokuapp.com' is therefore not allowed access.

对于集合中的每个图像url都会引发上述错误。 我对桶的CORS政策是

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

有人知道这个CORS策略为什么会发生CORS错误吗？接下来的一个问题是，为什么这在一台机器上工作，而在另一台机器上不工作

编辑：

下面是试图下载图像时每台机器的响应标题的屏幕截图

这是工作机器的响应标头

这是不工作机器的响应头

很明显，不同之处在于不工作的机器的响应头没有ACCESS-CONTROL-ALLOW字段，但我不知道为什么会发生这种情况。我会做一些研究，但如果有人知道的话，那会很有帮助

第二次编辑：

这里还有不工作机器的请求头

Origin: https://xxxxx.herokuapp.com

Referer: https://xxxxx.herokuapp.com/yyyyyyyy/5ac2635557c3f70014529d4d

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

除了用户代理之外，工作机器的请求标头是相同的。

尝试替换

<AllowedOrigin>https://*</AllowedOrigin>
<AllowedOrigin>http://*</AllowedOrigin>

https://*
http://*

与

*

CORS错误已通过将CORS配置添加到我的存储桶中删除，但仍无法下载映像

我尝试了不同的解决方案，但这些都是对我有效的步骤。你应该试试这些步骤

1.在存储桶上添加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>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

---

浏览器缓存？可能尝试清除浏览器缓存/强制重新加载您可以从两台计算机上的浏览器控制台提供请求/响应头吗？嘿，您也可以为这两种图像请求尝试添加请求头吗？如果你能做到这一点，文本会比图像更好。嗯，这排除了我的理论，即触发问题响应的请求缺少

Origin

标题。如果我正在对此进行故障排除，我将从Chrome DevTools中获取curl命令，用于“坏”机器上的网络请求（

network

tab>右键单击>

Copy

Copy as curl

），然后在“好”和“坏”机器上运行此命令，添加

-v

参数以显示标题。松散地说，如果对curl命令的响应具有

Access Control Allow-*

标题，则服务器正常，您可以通过该标题隔离机器/浏览器。哦，关于飞行前的主题，基于，这些请求将是“简单”的，不会触发飞行前检查的要求。这与我在测试代码时看到的一致（即每个图像的

GET

请求）。谢谢，但这并没有解决它。我想我已经尝试了所有可能的CORS配置：）我倾向于认为这是一种奇怪的浏览器相关问题，我面临着同样的问题。当我清除缓存时，问题就消失了。

<AllowedOrigin>https://*</AllowedOrigin>
<AllowedOrigin>http://*</AllowedOrigin>

<AllowedOrigin>*</AllowedOrigin>

<?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>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

<img crossorigin="anonymous" id="media_img" src="example.jpeg">

  $('#media_img').on('click', () => {
    downloadImage();
  })
 
  function toDataURL(url) {
    return fetch(url).then((response) => {
      return response.blob();
    }).then(blob => {
      return URL.createObjectURL(blob);
    });
  }

  async function downloadImage() {
    const a = document.createElement('a');
    a.href = await toDataURL($('#media_img').attr('src'));
    a.download = 'example.jpeg';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }