La URL de reescritura de .htaccess conduce a la falta de CSS

10

Estoy tratando de hacer mi url de esto:

example.com/view.php?id=15

A esto:

example.com/watch/15

Mi código en .htaccesses el siguiente:

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

Ahora, si voy example.com/watch/15, carga el contenido pero sin JS, CSS porque en este caso busca CSS y JS en la /watchcarpeta que no existe.

¿Cómo hago que esta opción funcione correctamente? No quiero crear una carpeta de observación y copiar y pegar CSS y JS para que se incruste correctamente.

htaccess relative-urls StuckBetweenTrees
fuente
1
Haga que sus referencias JS y CSS URL completas en lugar de relativas.
closetnoc
... o incluya el baseelemento que hace referencia a la URL base a la que están relacionadas todas las URL relativas. @closetnoc deberías agregar eso como respuesta.
MrWhite
@ w3d O tal vez porque no estoy seguro de lo que acabas de decir, tal vez puedas responderlo. ;-) ¡Prometo votarlo! Podría entenderlo mejor cuando la niebla se levanta, simplemente se levantó de una larga siesta después de 2 noches de solo 5 horas de sueño cada una.
closetnoc

Respuestas:

10

No poder encontrar sus archivos JavaScript y CSS es un problema del lado del cliente / navegador relacionado con su ruta URL, no es algo que deba solucionarse .htaccess(al menos no en este caso), aunque es porque está cambiando esto URL-ruta (en .htaccess) que está experimentando este problema.

Como @closetnoc sugirió en los comentarios, este problema se debe al uso de URL relativas en su HTML. ¿Relativo a qué? Recuerde, es el agente de usuario / navegador el que resuelve las URL relativas en su HTML, no el servidor. Por lo tanto, debe corregir sus URL; no .htaccess.

Por ejemplo, si hace referencia a su archivo CSS con una URL relativa del formulario href="styles.css"(nota, sin prefijo de barra) y actualmente se encuentra en la URL, example.com/view.php?id=15entonces el navegador resolverá naturalmente su URL CSS y la solicitud example.com/styles.css(en la raíz del documento). Sin embargo, si usted está actualmente en la URL example.com/watch/15(de hecho, en un /watch"directorio" [* 1] ), el navegador va a resolver su relación URL CSS relativa a un /watchsubdirectorio, en lugar de la raíz del documento, por lo que terminan con un absoluto / resuelto URL del formulario example.com/watch/styles.css.

( [* 1] Tenga en cuenta que "subdirectorio" en este contexto no es necesariamente un subdirectorio físico en su servidor, es un "subdirectorio" en la ruta URL; un segmento de ruta adicional. Pero el navegador no sabe la diferencia. )

Lo mismo se aplica si está utilizando URL relativas en sus documentos de error personalizados (definidos con la ErrorDocumentdirectiva en Apache). El documento de error personalizado se puede invocar en cualquier URL, por lo que cualquier URL relativa a un recurso estático (CSS, imagen, JS, etc.) será relativa a la URL que causó el error, no relativa al documento de error en sí (la ubicación de la cual está efectivamente oculta del usuario-agente).

Si cambiara sus URL de JavaScript y CSS para que sean relativas a la raíz (comenzando con una barra diagonal) o incluso absolutas, entonces no obtendría este problema. Este sería el método preferido. Alternativamente, puede usar el baseelemento ...

base etiqueta / elemento

Alternativamente, puede incluir un baseelemento en la headsección de su documento HTML (aunque esto no está exento de advertencias [* 2] ). Esto hace referencia a la URL absoluta con la que todas las URL relativas son relativas . En otras palabras, dado que espera que estas URL relativas sean relativas a la raíz del documento, agregue lo siguiente a la headsección:

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

Ahora, una URL relativa como la styles.cssreferenciada en un documento en URL /watch/15solicitará http://example.com/styles.css, no http://example.com/watch/styles.css.

[* 2] Sin embargo, hay algunas advertencias sobre el uso delbaseelemento. Una preocupación principal es que cualquierURL relativa destinada aldocumento actual ahora se dirigirá a la URL base. Esto puede afectar los anclajes en la página, como lashref="#top"URL del formulario,href="?sortby=date"etc. Y también losformelementos que se envían a sí mismos utilizando unactionatributovacío(por ejemplo<form action="" ...). Estas URL relativas que se dirigen al documento actual necesitarán ser modificadas para incluir la URL completa de la página actual (lo que puede evitar el punto de usar labaseetiqueta como una solución para empezar).

Referencia:

Señor White
fuente
1
Sí, funciona una vez que agrego base en la sección de la cabeza. Perdí 2 horas tratando de resolverlo y, sin embargo, es simple como agregar 1 línea de código ... ¡Muchas gracias por su respuesta informativa!
StuckBetweenTrees