Prevent AWS Amplify From Adding Trailing Slash and Forcing Redirect

Question

I am using AWS Amplify and cannot figure out how to configure my rewrite and redirects or routes.js to prevent trailing slashes from breaking my functionality.

When I run my code locally and try to visit localhost:3000/foo/bar/id the page renders fine. When I deploy this same code through amplify and user clicks a button with an href, the browser gets a 302 and redirects the user to example.com/foo/bar/id/, then because this page doesn't exist, the default Amplify redirect sends them to index.html with a 404

I have tried adding the following to my react routes:

/foo/bar/:id
/foo/bar/:id/

and the following redirect rules in the AWS Amplify console:

/foo/bar/<id>  | /foo/bar/<id> | 302
/foo/bar/<id>/ | /foo/bar/<id> | 302

but nothing is working. I am losing my mind here, any suggestions?

score 32 · Answer 1 · edited Feb 26 '21 at 23:59

Amplify adds a trailing slash to prevent urls like /about.html but that's probably not the real cause. Your app/browser is making requests to the server with routes that don't exist server-side (you're using SPA routes which are strictly client-side). Try adding the following redirect rule in the amplify js console (under App Settings: Redirects and rewrites > Edit > Open Text Editor):

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/",
        "status": "200",
        "condition": null
    }
]

This rewrites all files to /index.html which is the only route that exists server-side. For more info, checkout the docs on Trailing Slashes and Redirects for SPAs.

Here is a picture about how to do this settings in the aws amplify:

It is better that we copy the JSON object in the provided text editor.

Otherwise if you are going to use the webform please take care that you must enter this string as source:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

the reason is webform will scape the backslashes!

It was really helpful. I will add a picture to your answer for clarification. I followed the solution and it resolved my issue. — MJBZA, Feb 26 '21 at 07:44
Thanks this worked for me and resolved my issue. Whenever I loaded the website I developed in Chrome/Firefox on my phone, closed the app and re-opened it which reloads the last website, Amplify would give me an AccessDenied error... — adR, Sep 04 '21 at 13:49

score 5 · Answer 2 · answered Apr 30 '21 at 16:44

I had the same issue with my Next.js site on Amplify. After testing around for a few hours I've found the following solution:

[{
    "source": "/report/<slug>/",
    "target": "/report/<slug>",
    "status": "200",
    "condition": null
},
{
    "source": "/report/<slug>",
    "target": "/report/<slug>.html",
    "status": "200",
    "condition": null
}]

Add this to your redirects, then it should work.

You just have to replace "report" with your url parts.

Thank you for this! I've been looking all over the internet for this fix! — Hasan Ali, Nov 10 '22 at 12:31

score 0 · Answer 3 · answered Sep 29 '21 at 10:59

Adding the below one in the Rewrites & Redirect section worked for me as well. The trailing slash is now working.

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/",
        "status": "200",
        "condition": null
    }
]

Prevent AWS Amplify From Adding Trailing Slash and Forcing Redirect

3 Answers3