Friday, December 1, 2017

fetching images from Amazon s3 gives CORS error. (Chrome issue)

By Hường Hana 3:30 PM , , , , Leave a Comment

I'm trying to fetch images from Amazon s3 with these CORS config:

<CORSRule>     <AllowedOrigin>*</AllowedOrigin>     <AllowedMethod>GET</AllowedMethod>     <AllowedMethod>PUT</AllowedMethod>     <AllowedMethod>POST</AllowedMethod>     <AllowedMethod>DELETE</AllowedMethod>     <AllowedHeader>*</AllowedHeader> </CORSRule>

and the error I receive is :

Image from origin 'https://s3.amazonaws.com' has been blocked from loading by Cross-Origin     Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I receive this error in Chrome but not in Firefox. I've tried browsing but haven't found a solution. Can anyone help me out with this?

Thanks

1 Answers

Answers 1

I keep my eyes on AWS questions, and I see this quite a bit The problem with this question (and those like it) is that it only exposes half of the equation (the CORS configuration) to the community. The "C" in MVCE certainly isn't satisfied.

The missing half of the equation is how you're trying to access the resource on the front end. Specifically, the request headers that are sent are critical.

  • Are you using fetch? canvas? Amazon SDK? Something like domtoimage?
  • Have you captured the request headers for the failing request?
    • If so, why aren't they in the question?

CORS Basics

If you don't send an origin request header, you're not going to get CORS response headers back. If you do send an origin header, and the origin is allowed, you should get CORS headers back. It's that simple.

So a missing origin header should be the first thing you rule out. Are you absolutely sure you're sending an origin header? More often, is the library you're using sending one? If you dig a little deeper, the real question may be "why isn't an origin header present on my request?"

Side Note: You can use a browser extension like Requestly to remove the origin header from all outgoing requests, and marvel at all the stuff that breaks.

Works in x, but not y

Back to my "post your request headers" soapbox - If Chrome and Firefox are acting differently, have you verified that each is sending the same set of headers?

Several headers are set for you by the browser, and browser implementations may make different choices regarding which headers to send when.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment