web-dev-qa-db-ja.com

angularjs html5mode更新ページ取得404

AngularJSとGAE（Google App Engine – Java）を使用してアプリを作成しました。

SEO対応に変換したいです。

index.html

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

本体は_<div ui-view></div>_を介して動的にロードされます。

app.js

$locationProvider.html5Mode(true);

URLは正常に機能しますが、ページを更新すると404エラーが発生します。

何か考えがありますか、これが何を引き起こすのですか？

google-app-engineangularjshttp-status-code-404
19
user2625111

私はあなたがすでにこれを解決したと確信していますが、この問題に遭遇している他の人のために：

基本的に、AngularJSの$locationProvider.html5mode(true)はHTML5のhistory.pushState()を利用します。これは、ページをリロードすることなく、ユーザーの履歴とアドレスバーのURLを人工的に変更します。 /aboutのルートを（Angularで）作成したが、サーバーに一致するルートがない場合、ページを再読み込みするとサーバーにないという問題が発生するという問題が発生します。最も簡単な解決策は、アプリがアクセスできるすべてのルートについて、アプリのエントリポイント（/index.html？）をミラーリングすることです。

参照： https://stackoverflow.com/a/16570533/1500501

20
Michael Tang

役立つはずです、公式angular doc; https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to- configure-your-server-to-work-with-html5mode

それでも関連部分をここに貼り付けますが、ドキュメントを確認することをお勧めします。

Apache Rewrites

ServerName my-app

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>
8
code_ada

下記のセクションをgrunt fileliverloadミドルウェアセクションに追加してみてください。

livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect().use(
                '/apply',
                connect.static('./app/index.html')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      }  
   }
1
Ramya Ramachandran

人々がこの答えを探してから久しぶりですが、今日は必要でした。私はGAE、angularJS、ng-Routeを使用して、かなりフォーマットされたリンクを持つ実用的な例を作成しました。

これが GitHubの例へのリンクです

0
Igor Rendulic

JavaアプリがGAEで実行されている場合は、

RL書き換えフィルター

Urlrewrite.xmlという名前のXMLファイルが見つかります。すべてのルートをこのxmlに入れ、次のようなリクエストを受け取ったときに構成するようにします。

  • / location/edit/120211

リダイレクトされます

  • ＃/ location/edit/120211

そして、あなたのアプリはブートストラップされてルーティングを起動する時間があります

0
Gokhan Demirtas

私にとっては、インデックス（メイン）ページのタグ内の最初の行として次の行を修正します。

<base href="/">

さらに、IIS rewriteルールを次のように構成する必要があります：（iis rewrite拡張機能を最初にインストールしてください）

 <system.webServer>
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <add input="{REQUEST_URI}" pattern="(api)" negate="true" />
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>
    <caching enabled="false" enableKernelCache="false" />
0
asalhani