在 AWS S3 和 CloudFront 中托管 React Router 应用程序时出现 403 访问被拒绝错误

Question

当我将 React Router 应用程序部署到 AWS S3 和 CloudFront 时，并且当我尝试直接访问 React 路由时，它会出现以下错误，并显示 403 错误代码。当它流经应用程序时，我可以访问基本 URL ( www.sample-app.com ) 和路由 URL ( www.sample-app.com/cart )。

但是如果我尝试直接进入 React 路由（www.sample-app.com/cart），它会产生 403 Access Denied 错误，如下所示。主要的痛点是当我尝试刷新 React 路由 URL 时它会产生此错误。

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>REQUEST_ID</RequestId>   
  <HostId>HOST_ID</HostId>
</Error>

注意：我使用 AWS 负载均衡器和 Lambda 函数作为后端。我已设置 AWS ALB 和 Cloudfront 以使用 AWS Cognito 对用户进行身份验证。

感谢您对此的帮助。

Answer 1

由于cloudfront只能访问存储桶中确实存在的文件，并且如果请求不存在的对象，它将返回403，因此您需要添加一个自定义错误页面，该页面返回带有200状态代码的index.html文件。然后，因为返回了index.html，React Router 就可以完成它的工作了。

更多信息请点击这里：

https://www.codebyamir.com/blog/fixing-403-access-denied-errors-when-hosting-react-router-app-in-aws-s3-and-cloudfront

Answer 2

最简单的选择是在 CloudFront 实例的“错误页面”选项卡中创建一个简单的自定义错误。请参阅附图。修复时间为 30 秒，自动部署后即可生效。

Answer 3

使用 CloudFormation 创建 Cloudfront Distribution 时，请在 DistributionConfig 部分中使用以下内容

"DistributionConfig": {
//Other configs
 "CustomErrorResponses":[
     {
         "ErrorCachingMinTTL" : 1,
         "ErrorCode" : 403,
         "ResponseCode" : 200,
         "ResponsePagePath" : "/index.html"
       }
  ]
}

Answer 4

<BrowserHistory>就像我在评论中提到的，当您托管在静态站点中时无法使用。您需要一种机制将所有 URL 重定向到您的 index.html，以便 React-router 接管。

为了实现这一点，您将需要一些服务器端代码和托管。S3 无法工作，因为它只能处理静态文件。如果 S3 是唯一的选择，请使用或[此处][1]提到的 hack。我不会推荐它，但有一个。

如果您计划使用服务器端代码，这里是如何使用 NodeJs Express 来获取路由工作的示例，

app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(req, res) {
    res.sendfile('./dist/index.html');
});

假设您的构建位于 dist 文件夹中。[1]：React 路由器在 aws s3 存储桶中不起作用