3

I'm trying to download from a VueJS front-end an image that is stored into my S3 bucket but I always receive a cors error. I've tried several Cors Configuration for my bucket such as:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://******.s3-website-us-east-1.amazonaws.com/#/</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>HEAD</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

I've tried with to change the origin for * and its not working. I'm always receiving

OPTIONS https://elasticbeanstalk-us-east-1-*********.s3.amazonaws.com/da2f83b3-3563-2d3a-b421-7ce3832f7132.png net::ERR_ABORTED 403 (Forbidden)

Access to XMLHttpRequest at 'https://elasticbeanstalk-us-east-1-*********.s3.amazonaws.com/da2f83b3-3563-2d3a-b421-7ce3832f7132.png' from origin 'http://********.s3-website-us-east-1.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my call on front-end:

savePicture() {
  axios({
    url: "https://*****.s3.amazonaws.com/da2f83b3-3563-2d3a-b421-7ce3832f7132.png",
    method: 'GET',
    responseType: 'blob',
  })

I've double checked my config with the AWS documentation, so I'm not sure what is wrong.

Gleyak
  • 474
  • 1
  • 3
  • 15
  • What are the exact request and response headers? – zerkms Apr 16 '19 at 01:01
  • @Phil My bad on that, bad copy past, it got quotes in my code – Gleyak Apr 16 '19 at 01:03
  • It really just looks like your CORS configuration isn't applied to the bucket you're trying to fetch from. See [Troubleshooting CORS Issues - Verify that the CORS configuration is set on the bucket](https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html) – Phil Apr 16 '19 at 01:04
  • 1
    Have you tried [this](https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header) ? – awran5 Apr 16 '19 at 01:04
  • @awran5 Yes, I did, doesnt work for me – Gleyak Apr 16 '19 at 01:11
  • @Phil According to your link, if I see the Cors Configuration Tab in the permission menu, the CORS config is set. I see it, so I suppose it is done. – Gleyak Apr 16 '19 at 01:21
  • That's not what it says at all... _"If the CORS configuration is set, the console displays an **Edit CORS Configuration** link in the Permissions section of the Properties bucket"_. Do you see _"Edit CORS Configuration"_? – Phil Apr 16 '19 at 01:24
  • Did you also check @awran5's link? Seems quite common for people to miss hitting "Save" – Phil Apr 16 '19 at 01:25
  • @Phil Indeed, it's kinda common issue. Beside the accepted answer, there are some solutions may work. – awran5 Apr 16 '19 at 01:40
  • @Phil There is no "Edit Cors Configuration", only the tab Cors Configuration, in the permissions, which bring me to the Cors Configuration Editor. This is what I what I thought was the Edit CORS configuration. I'll keep going through the answer of awran's link. That being said, I've deployed my front-end as a static page in S3 too and changed my * tag for the URL provided by AWS. Still an Error, but not quite de same. I've updated my original post. – Gleyak Apr 16 '19 at 02:11
  • Have you clicked "Save" after editing your CORS configuration? – Phil Apr 16 '19 at 03:16
  • @Phil yes, I've checked a couple of time – Gleyak Apr 16 '19 at 03:43
  • 1
    just to confirm, the cors policy is enabled onbucket "elasticbeanstalk-us-east-1**" ? – James Dean Apr 16 '19 at 07:35
  • @JamesDean If I select my bucket, there is an informational window that appear and under the Permission section, there is CORS Configuration : Yes. So I would say yes, it is enabled. – Gleyak Apr 16 '19 at 12:10
  • 1
    @Gleyak Thanks, I was just confirming because the cors should be enabled on bucket elasticbeanstalk-us-east-1, not on the one which you're using as static website endpoint. – James Dean Apr 16 '19 at 15:21
  • I've found a work around. Instead of making an HTTP call in my front-end, I'm using the S3Client from java. Everything is good when I call from the backend. – Gleyak Apr 16 '19 at 15:39

0 Answers0