Angular 在 AWS (Cloudfront/S3) 上用于 Safari

Question

我在 Safari 上查看我的网站时遇到问题。我知道有很多信息可以找到，但我不知道什么才是真正有用的。

我有一个带有 angular ui-路由器的 Angular 应用程序，配置如下： $locationProvider.html5Mode(true).hashPrefix('!');

在我的index.html

<meta name="fragment" content="!">
<base href="/" />

我的S3配置是这样的：

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>test.example.com</HostName>
            <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

现在，当我在 Safari 中 F5 一个页面时，# 之后的所有内容都丢失了。 2016年真的没有办法解决吗？

Answer 1

我找到了解决方案。显然，如果您使用 https 协议，Safari 和 ios 中的哈希值不会被删除。您必须像这样将协议添加到 S3 重定向选项：

<Redirect>
    <Protocol>https</Protocol>
    <HostName>test.example.com</HostName>
    <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>

在此示例中，我指向支持 https 的 Cloudfront 分发。使用新的证书管理器，安装免费的 SSL 证书非常容易。

Answer 2

我找到了另一种解决方案，该解决方案还允许在一个存储桶的子文件夹中包含多个 angular 应用程序并随意使用子域

S3 Static Website Hosting Route All Paths to Index.html

Angular 在 AWS (Cloudfront/S3) 上用于 Safari

Angular on AWS (Cloudfront/S3) for Safari

angularjs

amazon-s3

safari

angular-ui-router

amazon-cloudfront