Angular and cloudfront with Safari

Question

We've setup an angularjs application on cloudfront which has all asset files on s3 storage and from there used via cloudfront for SSL and performance.

We have an identical setup to what is described in this guide

https://rossfairbanks.com/2015/01/30/integrating-angular-s3-cloudfront.html

As we used same post to create our own setup, it seems though that this works on all browsers except Safari.

On Safari, when visiting a url directly on a given path or refreshing any sub pages, the ui-router would redirect user page to landing page.

For staging though, we have same setup but running directly on S3 without CloudFront in middle hence no SSL. but, yet it seems to work even on Safari

so, problem seem to be an issue with CloudFront and Safari to be more specific.

Can anyone advise on what could be the cause? and how we can solve it?

UPDATE: This issue might be related to this bug https://bugs.webkit.org/show_bug.cgi?id=24175

Answer 1

Angular on AWS (Cloudfront/S3) for Safari

I figured out that you need to use https in order Safari to refresh correctly. You can tell S3 to redirect to https protocol and the problem gets solved:

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

Answer 2

I had this problem a ton but not this specific issue. Safari which affects desktop and mobile/tablet devices does have this quirk. In many instances I was able to change it to a query parameter when I know it is going to be going through a redirect. It is a frustrating issue that has been going on for months.