.htaccess réécrire l'URL conduit à CSS manquant

10

J'essaie de faire mon URL à partir de ceci:

example.com/view.php?id=15

Pour ça:

example.com/watch/15

Mon code .htaccessest le suivant:

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

Maintenant, si j'y vais example.com/watch/15, charge le contenu mais sans JS, CSS car dans ce cas, il cherche CSS et JS sous le /watchdossier qui n'existe pas.

Comment faire pour que cette option fonctionne correctement? Je ne veux pas créer de dossier de surveillance et copier-coller CSS et JS afin qu'il s'intègre correctement.

htaccess relative-urls StuckBetweenTrees
la source
1
Faites vos références JS et CSS des URL complètes au lieu de relatives.
closetnoc
... ou inclure l' baseélément qui fait référence à l'URL de base à laquelle toutes les URL relatives sont relatives. @closetnoc, vous devez ajouter cela comme réponse.
MrWhite
@ w3d Ou peut-être parce que je ne suis pas sûr de ce que vous venez de dire, vous pouvez peut-être le mettre dans une réponse. ;-) Je promets de voter pour! Je pourrais mieux comprendre quand le brouillard se lève - je viens de me lever d'une longue sieste après 2 nuits de seulement 5 heures de sommeil chacune.
closetnoc

Réponses:

10

Ne pas pouvoir trouver vos fichiers JavaScript et CSS est un problème côté client / navigateur lié à votre chemin URL, ce n'est pas quelque chose qui devrait être corrigé .htaccess(du moins pas dans ce cas) - bien que ce soit parce que vous changez cela URL-chemin (en .htaccess) que vous rencontrez ce problème.

Comme l'a suggéré @closetnoc dans les commentaires, ce problème est dû à l'utilisation d'URL relatives dans votre code HTML. Par rapport à quoi? N'oubliez pas que c'est l'agent utilisateur / navigateur qui résout les URL relatives dans votre code HTML, pas le serveur. Vous devez donc corriger vos URL; non .htaccess.

Par exemple, si vous faites référence à votre fichier CSS avec une URL relative du formulaire href="styles.css"(remarque, pas de préfixe slash) et que vous êtes actuellement à l'URL, example.com/view.php?id=15le navigateur résoudra naturellement votre URL CSS et demande example.com/styles.css(à la racine du document). Toutefois, si vous êtes actuellement à l'URL example.com/watch/15(efficace dans un /watch« sous - répertoire » [* 1] ), le navigateur va résoudre votre rapport URL CSS par rapport à un /watchsous - répertoire, plutôt que la racine du document, si vous vous retrouvez avec un absolu / résolu URL du formulaire example.com/watch/styles.css.

( [* 1] Notez que "sous-répertoire" dans ce contexte n'est pas nécessairement un sous-répertoire physique sur votre serveur - c'est un "sous-répertoire" dans le chemin URL; un segment de chemin supplémentaire. Mais le navigateur ne connaît pas la différence. )

La même chose s'applique si vous utilisez des URL relatives dans vos documents d'erreur personnalisés (définis avec la ErrorDocumentdirective sur Apache). Le document d'erreur personnalisé peut potentiellement être appelé sur n'importe quelle URL, donc toute URL relative à une ressource statique (CSS, image, JS, etc.) va être relative à l'URL à l'origine de l'erreur, et non au document d'erreur lui-même (dont l'emplacement est effectivement caché à l'agent utilisateur).

Si vous avez modifié vos URL JavaScript et CSS pour qu'elles soient relatives à la racine (en commençant par une barre oblique) ou même absolues, vous n'obtiendrez pas ce problème. Ce serait la méthode préférée. Alternativement, vous pouvez utiliser l' baseélément ...

base tag / élément

Alternativement, vous pouvez inclure un baseélément dans la headsection de votre document HTML (bien que cela ne soit pas sans mise en garde [* 2] ). Cela fait référence à l'URL absolue à laquelle toutes les URL relatives sont relatives . En d'autres termes, puisque vous vous attendez à ce que ces URL relatives soient relatives à la racine du document, ajoutez ce qui suit à la headsection:

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

Maintenant, une URL relative telle que styles.cssréférencée dans un document à l'URL /watch/15demandera http://example.com/styles.css, non http://example.com/watch/styles.css.

[* 2] Il existe cependant quelques mises en garde concernant l'utilisation de l'baseélément. Une préoccupation majeure est que tout parent URL qui est destiné à cibler le courant document cible maintenant l'URL de baseplace. Cela peut affecter les ancres sur la page comme leshref="#top"URL du formulaire,href="?sortby=date"etc. Et aussi lesforméléments qui se soumettent à eux-mêmes en utilisant unactionattributvide(par exemple<form action="" ...). Ces URL relatives qui ciblent le document actuel devront être modifiées pour inclure l'URL complète de la page en cours (ce qui peut déjouer le point d'utiliser labasebalise comme solution de contournement pour commencer).

Référence:

MrWhite
la source
1
Oui, cela fonctionne une fois que j'ai ajouté la base dans la section tête. J'ai perdu 2h à essayer de le résoudre et pourtant c'est aussi simple que d'ajouter 1 ligne de code ... Merci beaucoup pour votre réponse informative!
StuckBetweenTrees