CODEWITHSUNDEEP
node.jsamazon-web-servicesserver-side-renderingaws-amplifyisomorphic-javascript
Telenoobies
Telenoobies

Reputation: 936

403 Access Error returned from Browser possibly caused by AWS

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.

enter image description here

How can I find a potential cause of this problem?

enter image description here

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

Upvotes: 8

Views: 7625

Answers (5)

bhargava.prabu
bhargava.prabu

Reputation: 708

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)

Amplify 403

Upvotes: 7

Justin
Justin

Reputation: 1120

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.

Upvotes: -1

Telenoobies
Telenoobies

Reputation: 936

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.

Upvotes: 3

F_SO_K
F_SO_K

Reputation: 14889

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;

Upvotes: 0

Jason Wadsworth
Jason Wadsworth

Reputation: 8885

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/

Upvotes: 3

Related Questions