Clever Geek Handbook

Heroku Amazon s3 images - 403 error sometimes?

I have my server setup in Heroku and I used Amazon s3 to store images (downloaded from media gem) , but sometimes I get weird 403 errors:

"Failed to load resource: server responded with status 403 (Forbidden)"

(see image below)

Image of my web page with missing images

If I reload the page, the images are shown again.

I installed CORSRule:

 <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <ExposeHeader>ETag</ExposeHeader>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <AllowedHeader>Range</AllowedHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>

I'm not a CORSRule expert and I've tried several, but I would be so happy if someone could point me in the right direction.

--------------- Updated --------------

Here I have a generic request header, response headers, and request headers when I am missing an image.

General

Request URL:https://exnerbilleder.s3.amazonaws.com/nye/uploads/image/image/215/thumb_5.jpg
Request Method:GET
Status Code:403 Forbidden
Remote Address:52.95.150.17:443
Referrer Policy:no-referrer-when-downgrade

Response headers

Content-Type:application/xml
Date:Tue, 08 Aug 2017 15:49:49 GMT
Server:AmazonS3
Transfer-Encoding:chunked
x-amz-id-2:EG4D5X29x8eAuu+xD9PdG2MsdGYnWHnpkuOc87p1h7nbFgvk57S6Be631UwTdF9tHMauoAjf6j4=
x-amz-request-id:0C43705C41CD57C9

Request headers

Accept:image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:da-DK,da;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Host:exnerbilleder.s3.amazonaws.com
Referer:http://inger-exner.herokuapp.com/works/slotsgarden
User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Mobile Safari/537.36

Visit the site

You may have a problem if you visit the site

+3


source to share


2 answers


Similar to Amazon's problem. A tool like New Relic or Skylight can help you debug this type of problem when different components are involved, lying on different service providers.



+1


source


Try the following:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example.com</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
  <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
  <ExposeHeader>x-amz-request-id</ExposeHeader>
  <ExposeHeader>x-amz-id-2</ExposeHeader>
 </CORSRule>
</CORSConfiguration>

You can refer to two links below:



http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails

+1


source






More articles:


All Articles