.htaccess書き換えURLによりCSSが失われる

私はこれから私のURLを作ろうとしています：

example.com/view.php?id=15

これに：

example.com/watch/15

私のコード.htaccessは次のとおりです：

Options -Indexes
Options +FollowSymlinks
RewriteEngine On
RewriteRule ^watch/([^/]+) view.php?id=$1 [NC]

ここに行くとexample.com/watch/15、コンテンツが読み込まれますが、JSは/watchありません。CSSは、この場合、存在しないフォルダーの下でCSSとJSを検索するためです。

このオプションを正しく機能させるにはどうすればよいですか？監視フォルダーを作成してCSSとJSをコピーして貼り付けたくないので、適切に埋め込まれます。

JavaScriptとCSSファイルが見つからないことは、URLパスに関連するクライアント側/ブラウザの問題です。これは、修正する必要があるものではあり.htaccessません（少なくともこの場合は）-これを変更しているためです.htaccessこの問題が発生しているURLパス（内）。

@closetnocがコメントで示唆しているように、この問題はHTMLで相対URLを使用していることが原因です。何に対して？サーバーではなく、HTML内の相対URLを解決するのはユーザーエージェント/ブラウザであることを忘れないでください。したがって、URLを修正する必要があります。ない.htaccess。

たとえば、フォームの相対 URL href="styles.css"（スラッシュ接頭辞なし）でCSSファイルを参照していて、現在そのURLにいるexample.com/view.php?id=15場合、ブラウザーはexample.com/styles.css（ドキュメントルートで）CSS URLとリクエストを自然に解決します。ただし、現在URL example.com/watch/15（実質的には/watch「サブディレクトリ」^{[* 1]}）にいる場合、ブラウザはドキュメントルートではなく、サブディレクトリを基準にして相対 CSS URL を解決するため、最終的に絶対/解決されます。フォームのURL 。/watchexample.com/watch/styles.css

（^{[* 1]}このコンテキストの「サブディレクトリ」は、必ずしもサーバー上の物理サブディレクトリではないことに注意してください。これは、URLパスの「サブディレクトリ」であり、追加のパスセグメントです。ただし、ブラウザは違いを認識していません。 ）

カスタムエラードキュメント（ErrorDocumentApache のディレクティブで定義）で相対URLを使用している場合も同様です。カスタムエラードキュメントは任意のURLで呼び出される可能性があるため、静的リソース（CSS、画像、JSなど）への相対URLは、エラードキュメント自体ではなく、エラーの原因となったURLに相対的になります。 （その場所はユーザーエージェントから事実上隠されています）。

JavaScriptとCSSのURLをルート相対（スラッシュで始まる）または絶対に変更した場合、この問題は発生しません。これは推奨される方法です。または、base要素を使用できます...

base タグ/要素

別の方法として、HTMLドキュメントのセクションにbase要素を含めることもできheadます（ただし、警告がないわけではありません^{[* 2]}）。これは、すべての相対URLが相対的な絶対URLを参照します。つまり、これらの相対URLはドキュメントルートに対して相対的であると想定しているため、headセクションに次の行を追加します。

<base href="http://example.com/">

これで、URL styles.cssのドキュメントで参照されるような相対URL /watch/15はhttp://example.com/styles.css、ではなくを要求しますhttp://example.com/watch/styles.css。

^{[* 2]}ただし、base要素の使用にはいくつかの注意事項があります。主な問題は、現在のドキュメントを対象とすることを目的とした相対 URLが、代わりにベースURLを対象とすることです。これは、フォームのようなページ内アンカーやフォームなどのURLに影響を与える可能性があります。また、空の属性を使用して自身に送信する要素（例：）も影響します。現在のドキュメントをターゲットとするこれらの相対URLは、現在のページの完全なURLを含めるように変更する必要があります（これは、最初に回避策としてタグを使用するポイントを無効にする可能性があります）。href="#top"href="?sortby=date"formaction<form action="" ...base

参照：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
• /programming/1889076/what-are-the-recommendations-for-html-base-tag