Angular路由在Cloudfront和S3上无法工作。

Question

Angular路由在Cloudfront和S3上无法工作。

16

我有一个使用Angular 6的网站，托管在启用了S3网站托管的S3上。此外，我在其前面放置了CloudFront分发。我配置了CloudFront，使其重定向到index.html并响应200。然而，只能使用CloudFront访问“/”。其他URL（例如“/*”）无法加载。Angular会将“/”加载为主页，似乎只看到“/”。我添加了一些代码来记录传递给Angular的URL，结果总是“/”。此外，有时“/*” URL甚至无法加载“/”，并在控制台上看到此错误：“Uncaught SyntaxError：Unexpected token <”。您们有任何想法是什么导致了这个问题吗？

S3设置：

CloudFront行为：

- super7egazi

1

请向我们展示CloudFront配置，特别是“Behaviors”设置。 - A.Khan

1

我配置了CloudFront，使其将任何内容重定向到index.html。- 您是否使用Lambda@Edge将请求重定向到index.html？您能否向我们展示“默认”路径模式的编辑视图？ - A.Khan

@A.Khan，我附上了新的信息。希望这就是你要找的。 - super7egazi

我不确定你的主机配置问题，但我可以告诉你，如果你在构建中没有设置基本 href，angular 将在任何 URL 上加载它。我们在 keycloak 主机上也遇到了这个问题，我放弃了并开始在我的路由器模块中使用哈希位置策略。希望这可以帮助到你。 - bodorgergely

我看到有些人这样做，但我不知道我的配置文件哪里出了问题！ - super7egazi

显示剩余2条评论

3个回答

6

在我的情况下，可以通过在“静态网站托管”下添加index.html作为“错误文档”来解决此问题。仅此而已。

- pauldendulk

0

这也发生在我身上，我通过在CloudFront设置中添加自定义错误响应来解决它：

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

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

- Rodrigo Alcorta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucas Santos · Accepted Answer

请查看：如何将React和Angular应用程序部署到S3/Cloudfront 您是否为403（禁止）和404（未找到）响应创建了自定义行为？

每当有人请求您的网站，例如www.yourwebsite.com/routeuri，请注意这个URIrouteuri在您的ORIGIN（即S3 BUCKET）中不存在，因此您的源（S3 BUCKET）将返回403响应（禁止）。因此，您还应该添加一个自定义错误响应以处理403状态码，如下图所示：

请确保在Cloudfront和S3 Bucket中都将index.html作为Default Root Object添加，如下图所示：

我强烈建议阅读官方文档，以了解CloudFront与源的关系。