Angular S3 静态网站 - 403 禁止路由错误

Question

我知道关于堆栈溢出还有其他类似的问题，但我还没有能够解决我的问题。我有一个使用静态网站托管在 S3 中托管的 Angular 7 应用程序。我还没有购买域或设置 CloudFront，因为我仍在开发网站。

我的问题是，当导航栏中的点击事件触发导航时，路由正常工作（代码使用路由器链接），但是如果我在除根（“/”）以外的任何页面上点击刷新，我会得到一个来自 S3 的 403 禁止错误：

正如我所说，角度路由似乎工作正常，因为我在代码中使用路由器链接来处理导航，这是一个例子：

<a routerLink="/services">Click here</a>

这是我的 app-routing.module.ts 代码：

const routes: Routes = [
  { path: '', component: HomeComponent }, 
  { path: 'about-us', component: AboutUsComponent }, 
  { path: 'new-patients', component: NewPatientsComponent }, 
  { path: 'services', component: ServicesProvidedComponent }, 
  { path: 'contact', component: ContactComponent }, 
  { path: '**', component: HomeComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我在想，根据我读过的其他解决方案，我需要以某种方式重定向到索引页面，以便 Angular 路由器启动，但我不确定我需要添加什么配置。我以为添加默认路由（'**'）会解决这个问题，但显然我错了。

当我部署到 S3 时，我总是选择使所有文件都可公开访问的选项，所以我认为这不是这里的问题。

Answer 1

啊当然是对的，当我发布问题时我想出了答案。我认为这是其他人对类似问题的答案，但我不会删除它，而是发布我为解决问题所做的工作，以防它帮助其他人..

我以为这个配置在 CloudFront 中，但事实证明它在 S3 存储桶配置中是正确的。对我来说，错误文档之前没有任何价值，将其设置为 index.html 解决了我的问题。

Answer 2

选择存储桶，转到Objects选项卡，选择所有文件，单击Actions，向下滚动并单击Make public。

Answer 3

我的团队使用 Python 来管理我们在 AWS 中的基础设施。将 ErrorResponses 添加到我们的 asw_cloudfront.Distribution 为我们解决了问题。

aws_cloudfront.Distribution(
...
error_responses = [
    aws_cloudfront.ErrorResponse(http_status=403, response_http_status=200, response_page_path='/index.html'),
    aws_cloudfront.ErrorResponse(http_status=404, response_http_status=200, response_page_path='/index.html')
])

Answer 4

这对我有用， 亚马逊 S3 > 存储桶 > 在“属性”>>“请求者付款”部分>>下应“启用”