Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 831
Rick Shukla Avatar asked Sep 14 '14 05:09

Rick Shukla


People also ask

How do I fix the problem with CORS in Chrome?

i. Turn OFF the CORS plugin, reload the app, at this time you should still get the errors which are correct. ii. Turn it back ON, reload the app, if the APIs are successful, stop here, no need to proceed to iii.

How do I fix a CORS issue in AWS?

Cross-Origin Resource Sharing (CORS) errors occur when a server doesn't return the HTTP headers required by the CORS standard. To resolve a CORS error from an API Gateway REST API or HTTP API, you must reconfigure the API to meet the CORS standard.

How do I enable CORS on AWS?

Enable CORS support on a REST API resourceSign in to the API Gateway console at https://console.aws.amazon.com/apigateway . Choose the API from the APIs list. Choose a resource under Resources. This will enable CORS for all the methods on the resource.


1 Answers

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.

like image 188
Mike Patrick Avatar answered Oct 14 '22 20:10

Mike Patrick