CloudFront 分配不提供来自 S3 存储桶的特定路由

Question

我开发了一个 React 应用程序并将其创建的构建部署到 S3 存储桶。该应用程序具有各种页面，例如登录、注册和用户/*。

问题： 但是，为 S3 存储桶设置 CloudFront 分配（例如

https://d4cvljufvoog1.cloudfront.net

）后，直接通过 CloudFront URL 访问特定路由会导致“访问被拒绝”错误。例如，当导航到“https://d4cvljufvoog1.cloudfront.net/signin”时，

但是

https://d4cvljufvoog1.cloudfront.net

这是有效的，但是当我点击也在构建中的登录页面但访问被拒绝问题时，我也添加了分发行为

遇到以下错误：

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>8545M4YXSVV59542</RequestId>
  <HostId>Hj247UsHnGHPCl1yyFRAWPAKDUVtKrSUnHN8mcyQMEzxiKeynWhpzfONp1t0fEKPhO6eM63vY3Q=</HostId>
</Error>

采取的行动： 我已配置 CloudFront 行为以匹配应用程序的路径（包括 /signin）和相同的 S3 存储桶。

请求帮助： 我应该采取哪些步骤来排查和解决此问题？我需要指导以确保 CloudFront 正确服务来自 S3 存储桶的所有路由，而不会遇到来自同一存储桶的访问问题

喜欢

https://d4cvljufvoog1.cloudfront.net/signin
https://d4cvljufvoog1.cloudfront.net/signup

Answer 1

在 S3 + CloudFront 组合中使用 ReactJS 应用程序时，除了添加行为之外，还需要添加

Error pages

。在错误页面选项卡中，您应该为这 2 个 HTTP 代码添加错误页面：

• 403
• 404

对于这两个状态代码，

HTTP response code

应设置为 200，

Response page path

应设置为

/index.html

。原因是对于 ReactJS 你没有

signin

或其他一些文件，这就是 S3 返回错误的原因。相反，当您收到此错误时，您会将其重定向回

index.html

，此时 React 的路由器将接管并将您发送到正确的页面。