Correct S3 Cloudfront CORS Configuration

0 votes

My application stores images on S3 and then proxies them through Cloudfront. I'm excited to use the new S3 CORS support so that I can use HTML5 canvas methods (which have a cross-origin policy) but can't seem to configure my S3 and Cloudfront correctly. Still running into "Uncaught Error: SECURITY_ERR: DOM Exception 18" when I try to convert an image to a canvas element.

Is there something I'm missing here?

UPDATE : Just tried changing the headers to

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

based on this question Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

Still no go.

UPDATE: MORE INFO ON REQUEST

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

UPDATE

I think maybe my request wasn't correct, so I tried enabling CORS with

img.crossOrigin = '';

but then the image doesn't load and I get the error: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

amazon-s3corsamazon-cloudfrontIs there something I'm missing here?

UPDATE : Just tried changing the headers to

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

based on this question Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

Still no go.

UPDATE: MORE INFO ON REQUEST

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

UPDATE

I think maybe my request wasn't correct, so I tried enabling CORS with

img.crossOrigin = '';

but then the image doesn't load and I get the error: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Mar 22 in Others by Edureka
• 9,320 points
65 views

1 answer to this question.

0 votes
Create a CORS configuration for your S3 bucket, which should include the following:

<AllowedOrigin>*</AllowedOrigin>

This origin's behaviors can be found under CloudFront -> Distribution -> Behaviors.

HTTP Methods Accepted: +OPTIONS
HTTP Methods Saved in Cache +OPTIONS
Using Request Headers to Cache: The Origin header should be added to your whitelist.
Wait for CloudFront to propagate the new rule, which should take about 20 minutes.

Distinct answers (with valid CORS headers) should now be cached for different client Origin headers in your CloudFront distribution.
answered Mar 24 by Edureka
• 9,320 points

Related Questions In Others

+1 vote
0 answers
0 votes
1 answer

Using VBA Excel to create a gramatically correct list

The Excel AND function is a logical ...READ MORE

answered Feb 9 in Others by Edureka
• 8,820 points
21 views
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer

What does it mean when owner is None on an AWS S3 object?

S3 Object Ownership is an Amazon S3 ...READ MORE

answered Mar 15 in Others by Edureka
• 8,820 points
114 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP