Unable to figure out "Access Control Allow Origin" Error!

Glitch Help
1

Hello! I’m trying to configure CORS headers with AWS for my Glitch project. However, I get this difficult error:

Access to image at ‘https://s3.amazonaws.com/vrthday-images/240_F_78696623_0tW8XF6TdwplkwdsauIp75SSCmdUu00l.jpg’ from origin ‘https://equal-whippet.glitch.me’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

On the AWS side, I have enabled CORS configuration. How do I fix this in my Glitch project?

Anything is appreciated – thanks!
Ben

2

Hey @GroovyMammoth can you let us know what browser and operating system you’re on?

3

Hi @cori!

I’ve been using Google Chrome with a Mac OS, but we’ve noticed this issue with different OS and browsers as well.

4

Hi @cori,

I know this is all a bit hard over this forum…so I’ve reserved some office hours for us to discuss this. Looking forward to it!

Ben

5

Hey @GroovyMammoth I saw those and am happy to take a look with you. What’s making it extra-difficult from my end is that I’m not able to repro the problem consistently.

One thing I note is that if you try to load any of the images from Glitch’s CDN (which is an S3 bucket like the one that’s housing your lemons) like the ones in your project’s assets drawer I see the response headers I’d expect for CORS. However when I load one of your lemon images I do not see the appropriate CORS headers. Can you double check your S3 settings, and perhaps provide a screenshot of those?

6

Hey @GroovyMammoth I played with this a little more, and Remixed it and used one of the urls for one of the assets you’d uploaded and replaced one of the lemon image urls with that address, and everything worked as expected for that image:

image
image.jpg828×335 65.5 KB

This further leads me to believe that your S3 bucket’s settings are where things are breaking down. Have you had a chance to verify those yet?

7

Hi @cori,

Here’s the S3 code!

55%20PM
Screen Shot 2019-06-20 at 2.28.55 PM.png1144×346 45.3 KB

8

Here’s what the assets bucket that’s providing the working image I showed looks like:

<?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>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>86400</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>origin</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Perhaps making that update would be a good place to start!