URL перезаписи .htaccess приводит к отсутствию 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, CSS, потому что в этом случае он ищет CSS и JS в /watchпапке, которая не существует.

Как сделать так, чтобы эта опция работала правильно? Я не хочу создавать папки просмотра и копировать-вставлять CSS и JS, чтобы они правильно встраивались.

htaccess relative-urls

— StuckBetweenTrees
источник

Сделайте ваши ссылки JS и CSS полными URL, а не относительными.

— closetnoc

... или включите baseэлемент, который ссылается на базовый URL, к которому относятся все относительные URL. @closetnoc, вы должны добавить это в качестве ответа.

— MrWhite

@ w3d Или, может быть, потому что я не уверен в том, что вы только что сказали, возможно, вы можете поместить это в ответ. ;-) Я обещаю проголосовать за это! Я мог бы понять это лучше, когда туман поднимается - только что встал после долгого сна после 2 ночей всего около 5 часов сна каждый.

— closetnoc

Невозможность найти ваши файлы JavaScript и CSS - это проблема на стороне клиента / браузера, связанная с вашим URL-путем, это не должно быть исправлено .htaccess(по крайней мере, в этом случае) - хотя это потому, что вы меняете это URL-путь (в .htaccess), с которым вы столкнулись с этой проблемой.

Как подсказывает @closetnoc в комментариях, эта проблема вызвана использованием относительных URL в вашем HTML. Относительно чего? Помните, что пользовательский агент / браузер разрешает относительные URL в вашем HTML, а не сервер. Итак, вам нужно исправить ваши URL; не .htaccess.

Например, если вы ссылаетесь файл CSS с относительной URL вида href="styles.css"(заметьте, не слэш префикса) и вы в настоящее время в URL , example.com/view.php?id=15то браузер будет , естественно , решить CSS URL и запрос example.com/styles.css(в корневом каталоге документов). Однако, если вы в настоящее время в URL example.com/watch/15(эффективно в /watch«подкаталог» ^{[* 1]} ) , то браузер будет решить относительный CSS URL относительно к /watchподдиректории, а не корня документа, так что вы в конечном итоге с абсолютной / решена URL формы example.com/watch/styles.css.

( ^{[* 1]} Обратите внимание, что «подкаталог» в этом контексте не обязательно является физическим подкаталогом на вашем сервере - это «подкаталог» в URL-пути; дополнительный сегмент пути. Но браузер не знает разницы. )

То же самое применимо, если вы используете относительные URL-адреса в ваших пользовательских документах об ошибках (определенных с помощью ErrorDocumentдирективы Apache). Пользовательский документ об ошибке потенциально может быть вызван по любому URL-адресу, поэтому любой относительный URL-адрес статического ресурса (CSS, изображение, JS и т. Д.) Будет относиться к URL-адресу, вызвавшему ошибку, а не к самому документу об ошибке. (расположение которого эффективно скрыто от агента пользователя).

Если вы изменили URL-адреса JavaScript и CSS, чтобы они были относительными к корню (начиная с косой черты) или даже абсолютными, у вас не возникло бы этой проблемы. Это был бы предпочтительный метод. Кроме того, вы можете использовать baseэлемент ...

`base` тег / элемент

В качестве альтернативы вы можете включить baseэлемент в headраздел вашего HTML-документа (хотя это не без предостережений ^{[* 2]} ). Это ссылки абсолютный URL , что все относительные URL - адреса являются по отношению к. Другими словами, поскольку вы ожидаете, что эти относительные URL будут относиться к корню документа, добавьте в headраздел следующее:

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

Теперь будет запрашиваться относительный URL, такой как styles.cssссылка в документе на URL , а не ./watch/15http://example.com/styles.csshttp://example.com/watch/styles.css

^{[* 2]} Тем не менее, есть некоторые оговорки с использованиемbaseэлемента. Основная проблема заключается в том, что любой относительный URL-адрес, который предназначен для текущего документа, теперь будет вместо этого целевого базового URL-адреса. Это может повлиять на привязки внутри страницы, такие какhref="#top"URL-адреса формыhref="?sortby=date"и т. Д., А также наformэлементы, которые отправляются самим себе с использованием пустогоactionатрибута (например,<form action="" ...). Эти относительные URL-адреса, предназначенные для текущего документа, необходимо изменить, чтобы они включали полный URL-адрес текущей страницы (что может препятствовать использованиюbaseтега в качестве обходного пути для начала).

Ссылка:

— MrWhite
источник

Да, это работает, как только я добавляю базу в главном разделе. Я потратил впустую 2 часа, пытаясь решить это, и все же это просто, как добавить 1 строку кода ... Большое спасибо за ваш информативный ответ!

— StuckBetweenTrees

URL перезаписи .htaccess приводит к отсутствию CSS

base тег / элемент

`base` тег / элемент