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

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 2

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.