适用于 Safari 的 AWS (Cloudfront/S3) 上的 Angular [英] Angular on AWS (Cloudfront/S3) for Safari

问题描述

我在 Safari 上查看我的网站时遇到问题.我知道有很多信息需要查找，但我不知道什么是真正有效的.

I have issues viewing my site on Safari. I know there is lots of information to find but I can't figure out what would actually work.

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

I have an Angular app with angular ui-router, configured like this: $locationProvider.html5Mode(true).hashPrefix('!');

在我的 index.html

In my index.html

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

我的 S3 配置是这样的:

My S3 configuration is like this:

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

现在，当我在 Safari 中 F5 一个页面时，# 之后的所有内容都会丢失.2016年真的没有机会解决吗?

Now, when I F5 a page in Safari, everything after # gets lost. Is there really no chance how I can solve it in 2016?

推荐答案

我找到了解决方案.显然，如果您使用 https 协议，则 Safari 和 ios 中的哈希不会被删除.您必须将协议添加到 S3 重定向选项，如下所示:

I found the solution. Apparently the hash in Safari and ios is not dropped if you are using https protocol. You have to add the protocol to S3 redirect options like this:

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

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

In this example I point to Cloudfront distribution which supports https. With the new Certificate manager it is very easy to install a free SSL certificate.

这篇关于适用于 Safari 的 AWS (Cloudfront/S3) 上的 Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！