Amplify-cli: Amplify Angular leads to 403 when page refresh

[KrustyHack]

Note: If your question is regarding the AWS Amplify Console service, please log it in the
official AWS Amplify Console forum

Which Category is your question related to?

• Amplify
• CloudFront
• Hosting
• Angular

Amplify CLI Version

4.13.4

What AWS Services are you utilizing?

• Amplify
• CloudFront
• S3

Provide additional details e.g. code snippets

Ay,

I have a strange problem with my Angular app managed by Amplify CLI.

I have added hosting with Amplify CLI and my app is now published from devel and master branches and accessible through CloudFront with custom domains names like staging.dashboard.myapp.com and dashboard.myapp.com.

But I have a problem when a user hit refresh and he's not on / path OR he got the /mypage by an external link. I got a beautiful error :

Page : https://staging.dashboard.myapp.com/dashboard

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>D9561DA4390E7028</RequestId>
<HostId>
Hy1Gw8M9SaVOCz4DdOJnm/Ln0H7cBQqeVR82AOcNxQKzLhuMkb+QaLqlCpToQQmEAW+MTxMJNoQ=
</HostId>
</Error>

If user use "normal" Angular navigation there is no problem. It's only when he refresh while being on a page.

If someone got an idea about what's going on.

Thanks a lot !

EDIT : I have totally removed hosting from my Amplify app and I still got the problem. Did I miss something on Amplify concepts ?

[KrustyHack]

Ay,

Ok so it works now, after a little battle :+1:

• Added hosting again to my Amplify App (S3 + CloudFront)
• Configured custom error for 4xx with 200 return code and /index.html
• AND THE MORE IMPORTANT : changed my CNAME records with the one from the CloudFront and not the one provided by Amplify Console (which is the "managed CloudFront" when no hosting is configured)...

Anyway, can someone confirm that I'm right with my speculation ?

[rudyhadoux]

If you use Angular the starting point is always your website URL.
Every different URL returns a failure.

[KrustyHack]

Ay,

Yes, thanks. :)

And the problem was my DNS records which weren't properly configured. That's why I didn't understand how the Amplify redirect couldn't work.

[shide1989]

Had the same issue, it seems that Amplify doesn't configure the cloudfront template correctly for static websites that uses custom router (like Gatsby Router, or React router)

I changed the template.json, in the couldfront distribution part like this :
"DefaultRootObject": "index.html", "CustomErrorResponses": [ { "ErrorCachingMinTTL": 300, "ErrorCode": 400, "ResponseCode": 200, "ResponsePagePath": "/index.html" }, { "ErrorCachingMinTTL": 300, "ErrorCode": 403, "ResponseCode": 200, "ResponsePagePath": "/index.html" }, { "ErrorCachingMinTTL": 300, "ErrorCode": 404, "ResponseCode": 200, "ResponsePagePath": "/index.html" } ]

[vikaskasu92]

you may try this procedure --
when you host via Cloud Front and S3 bucket is the origin then you have to use the origin as awsexamplebucket.s3-website-us-east-1.amazonaws.com
Follow the guide given by AWS -- https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/

[azamanaza]

I've encountered this problem, uploading a built angular site onto s3, but results to 403 when accessing links directly on the browser.

This is because the app has not initialized yet. There needs to be a redirect rule that always points baseurl and then let angular routing handle the rest.

[edoardo849]

I have encountered this problem when trying to publish via the Amplify Console. As mentioned in the AWS documentation, from the Amplify Console:

1. Select your app
2. Within App Settings, go to Rewrites and redirects
3. Click on "Open text editor" and copy-paste the following:

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

[joerg-edcore]

I looking for a way to deploy amplify console rewrites and redirects through amplify push. I saw there the CloudFormation template amplify\backend\hosting\amplifyhosting\amplifyhosting-template.json which is used to deploy the AWS::Amplify::Branch.

Where would I put the rewrites and redirects?

[all2pie]

Still have to add these settings. There should be some proper fix