角上的AWS(的Cloudfront / S3)Safari浏览器浏览器、Cloudfront、AWS、Safari

2023-09-13 03:29:53 作者:追梦

我看我在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.

我有角的UI路由器,配置这样的一个角度应用程序: $ locationProvider.html5Mode(真).hash preFIX('!');

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.