使用Angular JS ui.router html5Mode（true）在页面刷新上配置Amazon S3静态网站 [英] Configure Amazon S3 static site with Angular JS ui.router html5Mode(true) on page refresh

问题描述

如何配置Amazon S3静态网页以正确路由Angular ui.router html5Mode路由？在页面刷新时，它将请求一个不存在的文件，而angular无法处理它。在文档中，他们建议在服务器上更改URL重写。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work -with-html5mode

但是，S3是存储，并没有提供相同的重定向选项
我一直在尝试使用内置的在重定向规则中，如

 < RoutingRules> 
< RoutingRule> 
<条件> 
< HttpErrorCodeReturnedEquals> 404< / HttpErrorCodeReturnedEquals> 
< / Condition> 
<重定向> 
< HostName> [[您的应用程序的域名]]< / HostName> 
< ReplaceKeyPrefixWith>＃/< / ReplaceKeyPrefixWith> 
< /重定向> 
< / RoutingRule> 
< / RoutingRules> 
  

然而，这只会导致重定向循环。

有什么建议吗？

解决方案

基本上有3个选项，使用EC2实例执行实际服务器重写到配置HTML5路由，或者像建议的dnozay一样，使用回退模式并重新编写请求以使用＃！ hashbang。最后，你可以使用标准的角度路线，这是我选择的选项。不那么麻烦，当Angular 2.0滚动时，你可以更新到那个。

https://stackoverflow.com/a/16877231/1733117

这里没有真正解决路由问题。

How can I configure an Amazon S3 static webpage to properly route Angular ui.router html5Mode routes? On page refresh, it will make a request for a file that doesn't exist, and angular can't handle it. In the docs, they recommend changing your URL rewrites on the server.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

However, S3 is storage, and doesn't offer the same redirection options I have been trying to use the built in redirection rules such as

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
        </Condition>
        <Redirect>
             <HostName>[[ your application's domain name ]]</HostName>
             <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

However, this just leads to a redirect loop.

Any suggestions?

解决方案

Basically there are 3 options, use an EC2 instance to perform the actual server rewrites to the configured HTML5 routes, or, like dnozay suggested, use the fallback mode and re-write requests to use the #! hashbang. Finally, you could just use the standard angular routes, which is the option I went with. Less hassle, and when Angular 2.0 rolls around, you can update to that.

https://stackoverflow.com/a/16877231/1733117

Doesn't really address the routing issue here.

这篇关于使用Angular JS ui.router html5Mode（true）在页面刷新上配置Amazon S3静态网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！