URL penulisan ulang .htaccess mengarah pada CSS yang hilang

10

Saya mencoba membuat url dari ini:

example.com/view.php?id=15

Untuk ini:

example.com/watch/15

Kode saya .htaccessadalah sebagai berikut:

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

Sekarang jika saya pergi ke example.com/watch/15sana memuat konten tetapi tanpa JS, CSS karena dalam hal ini mencari CSS dan JS di bawah /watchfolder yang tidak ada.

Bagaimana cara membuat opsi ini berfungsi dengan baik? Saya tidak ingin membuat folder tontonan dan salin-tempel CSS dan JS sehingga akan disematkan dengan benar.

htaccess  relative-urls 
— TerjebakBetweenTrees
sumber
1
Jadikan JS dan referensi CSS Anda sebagai URL lengkap alih-alih relatif.
— closetnoc
... atau sertakan baseelemen yang mereferensikan URL dasar ke mana semua URL relatif relatif. @closetnoc Anda harus menambahkan itu sebagai jawaban.
— MrWhite
@ w3d Atau mungkin karena saya tidak yakin apa yang baru saja Anda katakan, mungkin Anda bisa menjawabnya. ;-) Saya berjanji untuk memilihnya! Saya mungkin mengerti lebih baik ketika kabut terangkat - baru bangun dari tidur panjang setelah 2 malam masing-masing hanya sekitar 5 jam tidur.
— closetnoc

Jawaban:

10

Tidak dapat menemukan file JavaScript dan CSS Anda adalah masalah sisi klien / browser yang terkait dengan jalur URL Anda, itu bukan sesuatu yang harus diperbaiki .htaccess(setidaknya tidak dalam kasus ini) - meskipun itu karena Anda mengubah ini Jalur URL (di .htaccess) tempat Anda mengalami masalah ini.

Seperti yang disarankan @closetnoc dalam komentar, masalah ini disebabkan oleh penggunaan URL relatif di HTML Anda. Relatif dengan apa? Ingat, itu adalah agen-pengguna / browser yang menyelesaikan URL relatif di HTML Anda, bukan server. Jadi, Anda perlu memperbaiki URL Anda; tidak .htaccess.

Misalnya, jika Anda mereferensikan file CSS Anda dengan URL relatif dari formulir href="styles.css"(catatan, tanpa awalan garis miring) dan Anda saat ini di URL example.com/view.php?id=15maka browser secara alami akan menyelesaikan URL dan permintaan CSS Anda example.com/styles.css(di root dokumen). Namun, jika Anda saat ini berada di URL example.com/watch/15(efektif dalam /watch"subdirektori" [* 1] ) maka browser akan menyelesaikan URL CSS relatif Anda relatif ke /watchsubdirektori, bukan pada root dokumen, sehingga Anda berakhir dengan absolut / terselesaikan URL formulir example.com/watch/styles.css.

( [* 1] Perhatikan bahwa "subdirektori" dalam konteks ini tidak harus berupa subdirektori fisik di server Anda - ini adalah "subdirektori" di jalur URL; segmen jalur tambahan. Namun browser tidak mengetahui perbedaannya. )

Hal yang sama berlaku jika Anda menggunakan URL relatif dalam dokumen kesalahan khusus Anda (didefinisikan dengan ErrorDocumentarahan di Apache). Dokumen kesalahan khusus berpotensi dipanggil pada URL apa pun, sehingga URL relatif apa pun ke sumber daya statis (CSS, gambar, JS, dll.) Akan relatif terhadap URL yang menyebabkan kesalahan, bukan relatif terhadap dokumen kesalahan itu sendiri (lokasi yang secara efektif disembunyikan dari agen-pengguna).

Jika Anda mengubah JavaScript dan URL CSS Anda menjadi root-relatif (dimulai dengan garis miring) atau bahkan absolut maka Anda tidak akan mendapatkan masalah ini. Ini akan menjadi metode yang disukai. Atau, Anda dapat menggunakan baseelemen ...

base tag / elemen

Atau Anda dapat memasukkan baseelemen di headbagian dokumen HTML Anda (meskipun ini bukan tanpa peringatan [* 2] ). Ini referensi URL absolut bahwa semua URL relatif relatif terhadap. Dengan kata lain, karena Anda mengharapkan URL relatif ini relatif terhadap akar dokumen lalu tambahkan berikut ini ke headbagian:

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

Sekarang, URL relatif seperti yang styles.cssdirujuk dalam dokumen di URL /watch/15akan meminta http://example.com/styles.css, bukan http://example.com/watch/styles.css.

[* 2] Namun, ada beberapa peringatan dengan menggunakanbaseelemen tersebut. Perhatian utama adalah bahwa setiapURL relatif yang ditujukan untuk menargetkandokumen saat ini sekarang akan menargetkan URL dasar. Ini dapat memengaruhi jangkar di laman sepertihref="#top"dan URL formulir,href="?sortby=date"dll. Dan jugaformelemen yang mengirim sendiri menggunakanactionatributkosong(mis.<form action="" ...). URL relatif ini yang menargetkan dokumen saat ini perlu dimodifikasi untuk memasukkan URL lengkap dari halaman saat ini (yang mungkin mengalahkan titik menggunakanbasetag sebagai solusi untuk memulai).

Referensi:

— TuanWhite
sumber
1
Ya itu berfungsi setelah saya menambahkan basis di bagian kepala. Saya membuang-buang waktu 2 jam untuk mencoba menyelesaikannya namun sesederhana menambahkan 1 baris kode ... Terima kasih banyak atas jawaban informatif Anda!
— StuckBetweenTrees
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.