403 Access Error returned from Browser possibly caused by AWS

Question

I have my serverless web app hosted on AWS amplify. I am getting Access Denied error XML if I try refreshing the page. When I look into the Console, it shows no output. The code works fine on localhost, but will cause 403 error on live.

I have found a question that is very similar, except I did not use CloudFront.

How can I find a potential cause of this problem?

Update

I solved this, and I posted the answer in the answer section. However I now have a part 2 of this question.

How do I make it so that the client can directly call my URL like such:

https://URL.com/listing/LISTING_ID

Right now, if I try to call it directly while passing a LISTING_ID the page errors out. Does this have anything to do with Isomorphic ReactJs?

I have tried using Digital Ocean as my web hosting service instead of AWS. The same error happens.

Answer 1

I solved this by moving from AWS to Nginx for hosting.

And added this to etc/nginx/sites_available/default

location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                #try_files $uri $uri/ =404;
                try_files $uri /index.html;
        }

The reason why this is happening is because my app was a single paged app. Refreshing causes the browser to request the server, and the server does not handle requests.

Answer 2

Amazon S3 will return a 403 error with a message like this for a number of reason, but the most common one that people don't expect is when the object doesn't exist. You will get this error and not a 404.

https://aws.amazon.com/premiumsupport/knowledge-center/s3-troubleshoot-403/

Answer 3

There is not enough information in your question to understand the problem (what error are you getting, what is your setup, what do you mean by 'calling it directly'?).

That said, my assumption is you are hosting a Single Page Application on NginX. You have set the default page to index.html so when you call the root path, you get served the application, but when enter the path of a route in the address bar, you are getting a 404.

If so, this is a simple problem to fix. You are calling https://URL.com/listing/LISTING_ID and NginX is trying to find a static resource at that location. You need to intercept the 404 response and return your index.html file instead. Your client will then hit your React router and you will get the expected page.

Add this to your NginX config:

error_page 404 = 200 /index.html;

Answer 4

Did you set CORS properly on your server side? With proper CORS setting, your client JS code can access the different server from its origin.

Answer 5

This error is coming because Amplify don't have permission to render that routes. We need to enable those.

In Your Amplify app settings go to Rewrites and redirects and add these two rules.

Source address                                             Target address          Type
/<*>                                                       /index.html             404 (Rewrite)
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>   /index.html       200 (Rewrite)