Amplify Angular leads to 403 when page refresh

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 ?

[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
    }
]

[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"
                        }
                    ]```