Problems with CORS in Django using AWS S3

Question

My application uses a Bucket on AWS to host the static and MEDIA files, here’s the link: http://memoriasclubeturismoenv.us-east-2.elasticbeanstalk.com/gilson-rolim-02-12-2019 or https://memorias.clubeturismo.com.br/gilson-rolim-02-12-2019

In my application I use a plugin called "Dearflip".

The problem is that, for some reason, even configuring CORS in Bucket, still gives problem when running the plugin.

The error is this: Access to image at 'https://media-memorias.s3.amazonaws.com/media/models/Capa_mvd8KiC.png' from origin 'http://memoriasclubeturismoenv.us-east-2.elasticbeanstalk.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested Resource.

I added the following to Bucket:

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

Does anyone have any idea how to solve this mystery?

Answer 1

I think just add one more line in the Bucket configuration

<AllowedMethod>HEAD</AllowedMethod>

To test correctly, I go to www.jquery.com, open the console and type:

$.get('https://media-memorias.s3.amazonaws.com/media/models/Capa_mvd8KiC.png', 
  data => console.log(data) );

and correctly, shows CORS error

Access to XMLHttpRequest at
'https://media-memorias.s3.amazonaws.com/media/models/Capa_mvd8KiC.png'
from origin 'https://jquery.com' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

for testing, I copied your image and put it in my new Bucket, and also showed the error, but after configuring it with HEAD it soon worked out.

---

If I edit your Image Array and insert my link, I see everything right too:

I just modified the variable option_button_image you have at the end of the page to contain my link...