在 AWS Amplify 上部署 React Web 应用程序时出现 403 ACCESS DENIED 错误

Question

Been racking my brain on this for a couple of days. I am trying to deploy my react app on AWS Amplify. When I launch the application I am correctly directed to a sign in page (Uses Auth0 Universal login) After logging in I am redirected back to my web app through the callback URL.

When my page loads I get the following message

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
<Code>AccessDenied</Code>

<Message>Access Denied</Message>

<RequestId>B2173BDEE0658858</RequestId>

<HostId>
TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
</HostId>
</Error>

I am not hosting the web app through an s3 bucket, I uploaded my build file directly to AWS Amplify.

Any ideas on what the issue is?

Answer 1

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

Answer 2

When you create the zip folder, make sure you zip the contents of your build output and not the top level folder. For example, if your build output generates a folder named “build” or “public”, first navigate into that folder, select all of the contents, and zip it from there. If you do not do this, you will see an “Access Denied” error because the site's root directory will not be initialized properly.

  <Error>
      <Code>AccessDenied</Code>
      <Message>Access Denied</Message>
      <RequestId>4442587FB7D0A2F9</RequestId>
      <HostId>...</HostId>
 </Error>

• https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html