L'URL di riscrittura di .htaccess porta a CSS mancanti

Sto provando a fare il mio url da questo:

example.com/view.php?id=15

A questo:

example.com/watch/15

Il mio codice .htaccessè il seguente:

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

Ora, se ci vado example.com/watch/15, carica il contenuto ma senza alcun JS, CSS perché in questo caso cerca CSS e JS nella /watchcartella che non esiste.

Come faccio a far funzionare correttamente questa opzione? Non voglio creare una cartella di controllo e copiare e incollare CSS e JS in modo che vengano incorporati correttamente.

htaccess relative-urls

— StuckBetweenTrees
fonte

Rendi i tuoi riferimenti JS e CSS URL completi anziché relativi.

— closetnoc,

... o includi l' baseelemento che fa riferimento all'URL di base a cui sono relativi tutti gli URL relativi. @closetnoc dovresti aggiungerlo come risposta.

— MrWhite,

@ w3d O forse perché non sono sicuro di quello che hai appena detto, forse puoi inserirlo in una risposta. ;-) Prometto di votarlo! Potrei capirlo meglio quando la nebbia si solleva - appena alzato da un lungo pisolino dopo 2 notti di solo circa 5 ore di sonno ciascuno.

— closetnoc,

Non riuscire a trovare i tuoi file JavaScript e CSS è un problema lato client / browser relativo al tuo percorso URL, non è qualcosa che dovrebbe essere risolto .htaccess(almeno non in questo caso) - anche se è perché lo stai cambiando Percorso URL (in .htaccess) in cui si verifica questo problema.

Come suggerito da @closetnoc nei commenti, questo problema è causato dall'utilizzo di URL relativi nel tuo HTML. Rispetto a cosa? Ricorda, è l'utente-agente / browser che risolve gli URL relativi nel tuo HTML, non il server. Quindi, devi correggere i tuoi URL; no .htaccess.

Ad esempio, se stai facendo riferimento al tuo file CSS con un URL relativo del modulo href="styles.css"(nota, senza prefisso barra) e sei attualmente nell'URL, example.com/view.php?id=15il browser risolverà naturalmente l'URL CSS e la richiesta example.com/styles.css(nella radice del documento). Tuttavia, se siete attualmente presso l'URL example.com/watch/15(in modo efficace in una /watch"sottodirectory" ^{[* 1]} ), il navigatore risolverà il relativo URL CSS relativo a una /watchsottodirectory, piuttosto che la radice del documento, così si finisce con un assoluto / risolto URL del modulo example.com/watch/styles.css.

( ^{[* 1]} Nota che "sottodirectory" in questo contesto non è necessariamente una sottodirectory fisica sul tuo server - è una "sottodirectory" nel percorso URL; un segmento di percorso aggiuntivo. Ma il browser non conosce la differenza. )

Lo stesso vale se si utilizzano URL relativi nei documenti di errore personalizzati (definiti con la ErrorDocumentdirettiva su Apache). Il documento di errore personalizzato può potenzialmente essere chiamato su qualsiasi URL, quindi qualsiasi URL relativo a una risorsa statica (CSS, immagine, JS, ecc.) Sarà relativo all'URL che ha causato l'errore, non relativo al documento di errore stesso (la cui posizione è effettivamente nascosta all'utente-agente).

Se hai modificato gli URL JavaScript e CSS in modo che siano relativi alla radice (a partire da una barra) o addirittura assoluti, non otterrai questo problema. Questo sarebbe il metodo preferito. In alternativa, puoi utilizzare l' baseelemento ...

`base` tag / elemento

In alternativa puoi includere un baseelemento nella headsezione del tuo documento HTML (anche se questo non è privo di avvertimenti ^{[* 2]} ). Questo fa riferimento all'URL assoluto a cui sono relativi tutti gli URL relativi . In altre parole, poiché ti aspetti che questi URL relativi siano relativi alla radice del documento, aggiungi alla headsezione quanto segue :

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

Ora, un URL relativo, come styles.cssriferimento in un documento URL /watch/15richiederà http://example.com/styles.css, non http://example.com/watch/styles.css.

^{[* 2]} Vi sono, tuttavia, alcuni avvertimenti sull'usobasedell'elemento. Una delle preoccupazioni principali è che qualsiasiURL relativo destinato aldocumento corrente verrà ora indirizzato all'URL di base. Questo può influire su ancore in-page comehref="#top"e URL del modulohref="?sortby=date"ecc. E ancheformelementi che si inviano a se stessi utilizzando unactionattributovuoto(ad es.<form action="" ...). Questi URL relativi che hanno come target il documento corrente dovranno essere modificati per includere l'URL completo della pagina corrente (che potrebbe vanificare il punto di usare ilbasetag come soluzione alternativa per cominciare).

Riferimento:

— MrWhite
fonte

Sì, funziona quando aggiungo base nella sezione head. Ho sprecato 2 ore a cercare di risolverlo, eppure è semplice come aggiungere 1 riga di codice ... Mille grazie per la tua risposta informativa!

— StuckB BetweenTrees

L'URL di riscrittura di .htaccess porta a CSS mancanti

base tag / elemento

`base` tag / elemento