次のような複数のルートを持つangularアプリケーションがあります。
site.com/
site.com/page
site.com/page/4
アンギュラーのhtml5ルーティングモードを使用すると、アプリケーション内からリンクへのリンクをクリックするとこれらは正しく解決されますが、ハードリフレッシュを行うと当然404エラーになります。これを修正するために、基本的なhtaccessリライトを実装してみました。
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_METHOD} !OPTIONS
RewriteRule ^(.*)$ index.html [L]
これはangularリクエストに対しては機能しますが、次のようにドメイン内でスクリプトをロードしたり、ajax呼び出しを行ったりすると、
<script src="/app/programs/script.js"></script>
このスクリプトはロードされません-要求はリダイレクトされ、.htaccessが要求を再ルーティングする必要があると判断してindex.htmlページをロードしようとします-このファイルが存在することを知らず、リダイレクトの代わりにファイルをロードする必要があります。
解決する必要のある実際のファイルがない場合にのみ、htaccessがindex.html(ビューパラメーターを使用)にリクエストをリダイレクトする方法はありますか?
次のようなスニペットを使用します。
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
これは実際のリソースがあればそれをスキップし、すべてのAngularJSルートのindex.html
にスキップします。
アプリがdirective
テンプレートファイルを要求した場合に問題がありますが、ファイルがありません。場合によっては、アプリがindex.html
内の複数のスクリプトファイルを要求しました。
ファイルが存在しない場合は、404
ファイルの代わりにindex.html
応答を送信する必要があります。そこで、単純な正規表現パターンを追加して、欠落しているファイル要求を識別します。
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested pattern is file and file doesn't exist, send 404
RewriteCond %{REQUEST_URI} ^(\/[a-z_\-\s0-9\.]+)+\.[a-zA-Z]{2,4}$
RewriteRule ^ - [L,R=404]
# otherwise use history router
RewriteRule ^ /index.html
貧乏人の解決策(mod_rewriteを使用しない):
ErrorDocument 404 /index.html
私の場合、以下のような.htaccessファイルを作成します
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) ./index.html [NC,L]
ちょうど追加されました。 /index.htmlの前に、そのファイルを https://example.com/subfolder のようにドメインに追加し、正常に動作します
このリンクを確認してください: https://stackoverflow.com/a/49455101/5899936 ルートフォルダーに.htaccess
ファイルを作成し、 .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
あなたがする必要がある場合に備えて、別の詳細なhtaccessファイルを提供します:
これは私のhtaccessで、非常に近いですが、より具体的です:
DirectoryIndex index.html
RewriteEngine on
RewriteBase /subDir
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]