在 AWS S3 和 CloudFront 中托管 React 路由器应用程序时出现 403 Access Denied 错误

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

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

要实现这一点，您将需要一些服务器端代码和托管。 S3 无法工作，因为它只能处理 static 文件。 如果 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 存储桶中不起作用

Answer 2

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

更多信息在这里：

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