在将React Router应用程序托管在AWS S3和CloudFront时出现403访问被拒绝错误。
在将React Router应用程序托管在AWS S3和CloudFront时出现403访问被拒绝错误。
当我将一个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访问被拒绝的错误。最主要的问题是，当我尝试刷新一个React路由URL时，会出现此错误。
AccessDeniedAccess Denied REQUEST_ID HOST_ID
注意：我正在使用AWS负载均衡器和Lambda函数作为后端。我已经设置了AWS ALB和CloudFront来使用AWS Cognito对用户进行身份验证。
感谢您的帮助。
在使用CloudFormation创建CloudFront Distribution时，在DistributionConfig部分使用以下内容：
"DistributionConfig": {
//其他配置
"CustomErrorResponses":[
{
"ErrorCachingMinTTL" : 1,
"ErrorCode" : 403,
"ResponseCode" : 200,
"ResponsePagePath" : "/index.html"
}
]
}
谢谢提供这个片段！显然，如果你正在使用CloudFormation，这是处理这个问题的理想方式。
这应该是正确的答案。如果需要，可以使用界面中的相同字段进行配置，只需点击您的分发>错误页面并创建自定义响应。不要忘记使缓存失效以将更改传播到CDN。
在使用AWS S3和CloudFront托管React Router应用时遇到403 Access Denied错误的解决方法如下：
1. 最简单的解决方法是在CloudFront实例的"Error pages"选项卡中创建一个简单的自定义错误页面。如下图所示。这个解决方法只需要30秒，一旦自动部署就可以立即生效。
<a href="https://i.stack.imgur.com/oJWGN.png" rel="noreferrer"><img alt="CloudFront - Error pages tab. Create custom error response." src="https://i.stack.imgur.com/oJWGN.png"/></a>
2. 这篇文章提供了另一个小技巧来解决这个问题。详细内容请参考medium.com//…
在将React Router应用程序托管在AWS S3和CloudFront中时，出现403访问被拒绝错误的原因是CloudFront只能访问存储桶中存在的文件，如果请求了不存在的文件，它将返回403错误。为了解决这个问题，需要添加一个自定义错误页面，返回带有200状态码的index.html文件。这样，当返回index.html时，React Router就能正常工作。
具体解决方法可以参考以下链接：
然而，使用Next.js构建的React应用程序仍然在存储桶中的HTML页面上抛出403错误，而且当我这样做时，无论我刷新页面，它都会加载当前页面路径的主页。