45

我有一个应用程序，它使用单个 ng-view 和多个控制器和视图。如果我浏览根目录，例如：www.domain.com，一切正常。除了如果我按 Ctrl+R（刷新）然后它给我 404 错误页面未找到。例如：在此页面上刷新给我错误。 http://domain.com/item/1/。

但是，如果我使用 hashbang 访问该页面，那么它可以工作。例如：http ://domain.com/#!/item/1/

我该如何解决这个问题？我的 htacess 是空的。我使用的是支持 html5 hashbang 的 chrome。

4

7 回答 7

51

当浏览器调用http://example.com/#!/item/1/时，它是在调用 的索引页http://example.com/，你的 JS 然后通过分析 hashtag 来确定要显示什么内容。

当浏览器调用http://example.com/item/1/时，您的服务器正在尝试为 的索引页提供服务http://example.com/item/1/，但它无法找到并因此引发 404 错误。

为了实现你想要的，你要么需要：

  • 创建重写规则以重写指向您的根索引页面的链接
  • 调整您的 JS，使其生成主题标签而不是 URL。$locationProvider.html5Mode(false);如果您使用的是 AngularJS，则使用, 或关闭 html5 模式
  • http://example.com/item/1/在其中放置一个重定向到的索引页面http://example.com/#!/item/1/- 但是请注意，这需要为您创建的每个 /prettyPath/ 重复。

假设您使用的是 Apache 并且您的索引文件是 index.html，请在尝试其他两种解决方案之前尝试将以下内容添加到您的 .htaccess 文件中以创建重写规则。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)       /index.html/#/$1 
</IfModule>

如果您使用的是没有服务器端逻辑的纯 AngularJS/Ajax 解决方案，请将 index.php 更改为 index.html（或 index.htm，具体取决于您的根索引文件名）。

于 2013-01-05T05:16:59.683 回答
20

您只需在 .htaccess 中添加以下脚本

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
于 2015-10-23T20:57:06.493 回答
13

这是 URL 重写 (IIS) 的 .NET 版本

<system.webServer>
    <rewrite>
      <!--This directive was not converted because it is not supported by IIS: RewriteBase /.-->
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^index\.html" ignoreCase="false" />
          <action type="None" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="." ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
于 2014-09-20T01:59:29.940 回答
3

很棒的博客文章在这里... http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/

“这主要是因为您的 AngularJS 路由不是实际的 html 页面。例如，如果您的 Angular 应用程序中有一条到 /create-order 的路由。如果您从应用程序内部链接到该 URL，但如果用户尝试直接访问该页面，服务器将返回 404。”

于 2013-08-27T14:24:04.237 回答
1

截至 2018 年 3 月，只需在.htaccess文件中添加以下这些行。 

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
#RewriteRule ^(.front-end*)$ /front-end [NC,L,QSA]
RewriteRule ^(.*)$ /index.html [NC,L,QSA]

希望这对您有所帮助。

于 2018-03-08T14:30:04.180 回答
0

我无法发表评论，但除了使用HTML mode, base href="/", sudo a2enmod rewrite, 使用.htaccess重写。我必须AllowOverride All在您网站的可用网站和/etc/apache2 apache.conf

于 2017-06-19T12:33:12.597 回答
0 
    <ifModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_URI} !index
      RewriteCond %{REQUEST_URI} !.*\.(css  js|html|png)
      RewriteRule (.*) index.html [L]
    </ifModule>

将其用作 .htaccess

于 2017-08-13T13:46:54.280 回答