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

Question

我在Safari上查看我的网站时遇到问题.我知道有很多信息要找,但我无法弄清楚究竟会有什么用.

我有一个角度ui-router的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证书.