角度路由不适用于 Cloudfront 和 S3答案

【问题标题】：Angular routing is not working with Cloudfront and S3角度路由不适用于 Cloudfront 和 S3
【发布时间】：2019-07-03 19:57:13
【问题描述】：

我在 S3 上托管了一个 Angular 6 网站，并启用了 S3 网站托管。另外，我前面有一个 CloudFront 分布。我配置了云前端，以便它将任何内容重定向到 index.html 并以 200 响应。

但是，使用 CloudFront 只能访问“/”。未加载其他 url，例如“/*”。 Angular 改为加载“/”。好像 Angular 只看到“/”。

我添加了一些代码来记录传递给 angular 的 url，结果总是“/”。

另外，有时“/*”网址甚至不加载“/”，我在控制台“Uncaught SyntaxError: Unexpected token

你们知道是什么原因造成的吗？

S3 设置

云端行为：

【问题讨论】：

请向我们展示具体的云端配置 Behaviors 设置。
@A.Khan Hi Khan，按要求附上。谢谢
I configured cloud front so that it redirects anything to index.html - 您是否使用 Lambda@Edge 将请求重定向到 index.html？能否请您向我们展示Default 路径模式的编辑视图。
@A.Khan 我附上了新信息。希望这就是您正在寻找的。span>
我不确定您的托管配置内容，但我会告诉您，如果您未在构建中设置，Angular 将在您的任何 url 上加载基本 href。我们的 keycloak 托管也有这个问题，我刚刚放弃并开始在我的路由器模块中使用哈希定位策略。希望这会有所帮助。

标签： angular http amazon-s3 amazon-cloudfront

【解决方案1】：

请看：how to deploy react and angular apps to S3/Cloudfront

您是否为 403（禁止）和 404（未找到）响应创建了自定义行为？

每次有人向您的网站发出请求时，例如 www.yourwebsite.com/routeuri，请注意此 URI routeuri 在您的 ORIGIN 中不存在（即 S3 BUCKET），因此您的来源（S3 BUCKET）将返回 403 响应（禁止）。因此，您还应该为 403 状态码添加自定义错误响应，如下图所示：

还请确保您在 Cloudfront 和 S3 Bucketindex.html 作为默认根对象 /strong> 如下图所示：

我真的建议阅读官方文档以了解 CloudFront 与来源的关系。

【讨论】：

【解决方案2】：

在我的情况下，这可以通过在“静态网站托管”下添加 index.html 作为“错误文档”来解决。没有别的了。

【讨论】：

【解决方案3】：

这也发生在我身上，我在 CloudFront 设置中添加了一个自定义错误响应来修复它：

发生这种情况是因为当您将 CloudFront 配置为 S3 存储桶的唯一可用访问权限并搜索 /something 时，cloudfront 将尝试将该文件返回给用户浏览器。现在存储桶是私有的，只能从 CF 访问，所以这将返回 403 或 404 错误。要解决它，您需要在这些错误发生时返回 index.html。

致谢：https://lucasfsantos.com/posts/deploy-react-angular-cloudfront/

【讨论】：