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

Question

I have an Angular2 app and I am trying to download a set of images from S3 and put them in a zip file. I am using the following code which I got from https://gist.github.com/noelvo/4502eea719f83270c8e9

dlImages(urlList, jobName) {

    var zip = new JSZip();
    var count = 0;
    var zipFilename = jobName.split(" ").join("_") + ".zip";
    var img = zip.folder("images");

    console.log(zipFilename);

    urlList.forEach(function (url, idx) {
        //filename and file type should be the same it is in s3
        var fileExtension = url.split('.').pop(-1);
        var realIdx = idx + 1;
        var filename = realIdx.toString().concat(".").concat(fileExtension);
        console.log(url);
        console.log(filename);

        JSZipUtils.getBinaryContent(url, function (err, data) {
            if (err) {
                throw err; // or handle the error
            }
            img.file(filename, data, {binary: true});
            count++;

            if (count == urlList.length) {
                zip.generateAsync({type: 'blob'}).then(function (content) {
                    FileSaver.saveAs(content, zipFilename);
                });
            }
        });
    });
}

The code is running on a Heroku app and the strange thing is that it works as intended on my development machine (chrome Version 68.0.3440.106) however it gives a CORS error on another machine (chrome Version 69.0.3497.100). The specific CORS error is

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.

The above error is thrown for every image url in the set. And my CORS policy for the bucket is

<?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>

Also, in my app.js file I have

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
    next();
});

Does anyone know why this CORS error is happening for this CORS policy? A follow-up question is why would this work on one machine but not the other?

EDIT:

Below are screenshots of the response headers for each of the machines when an image is attempted to be downloaded.

This is the response header for the machine that DOES work

And here is the response header for the machine that DOES NOT work

So clearly the difference is that the response header for the machine that doesn't work does not have the ACCESS-CONTROL-ALLOW fields, but I don't know why that is happening. I'll do some research but if anyone knows that would be very helpful.

SECOND EDIT:

Also here is the request header for the machine that does not work

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

The request header for the machine that does work is the same except for the user-agent.

Answer 1

Try replacing

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

with

<AllowedOrigin>*</AllowedOrigin>

Answer 2

CORS error removed by adding CORS configuration to my bucket but still not able to download the image.

I tried different solutions but these are the steps that worked for me. You should try these steps.

1. Add CORS configuration on your bucket.

<?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>

2. Add crossorigin="anynymous" to img tag

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

3. JS code

  $('#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);
  }