angularjs html5mode刷新页面获得404

Question

我使用AngularJS和GAE(Google App Engine - Java)创建了一个应用程序.

我想转换它与SEO兼容.

的index.html

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

并且身体通过动态加载<div ui-view></div>.

app.js

$locationProvider.html5Mode(true);

网址工作正常,但当我刷新页面时,我收到404错误.

你有什么想法,这是什么原因造成的？

Answer 1

我相信你已经解决了这个问题,但对于遇到这个问题的其他人来说:

基本上AngularJS $locationProvider.html5mode(true)使用HTML5 history.pushState(),人工更改用户的历史记录和地址栏URL而无需重新加载页面.如果您为服务器创建路由(在Angular中)/about但没有任何匹配的路由,则会遇到重新加载页面的问题,显示服务器上没有该路由.最简单的解决方案是为应用程序/index.html可访问的所有路径镜像您的应用程序入口点(？).

请参阅:https://stackoverflow.com/a/16570533/1500501

Answer 2

它应该是有用的,官方角度doc; https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

我仍然会在这里粘贴相关部分,但我会建议查看文档.

Apache Rewrites

ServerName我的应用程序

DocumentRoot /path/to/app

<Directory /path/to/app>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</Directory>

Nginx重写

server {
server_name my-app;

index index.html;

root /path/to/app;

location / {
    try_files $uri $uri/ /index.html;
}
}

Azure IIS重写

<system.webServer>
 <rewrite>
  <rules> 
    <rule name="Main Rule" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>