.htaccess viết lại URL dẫn đến thiếu CSS

Tôi đang cố gắng tạo url của mình từ đây:

example.com/view.php?id=15

Về điều này:

example.com/watch/15

Mã của tôi trong .htaccessnhư sau:

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

Bây giờ nếu tôi đi đến example.com/watch/15nó sẽ tải nội dung nhưng không có bất kỳ JS, CSS nào vì trong trường hợp này, nó tìm CSS và JS trong /watchthư mục không tồn tại.

Làm thế nào để tôi thực hiện tùy chọn này hoạt động đúng? Tôi không muốn tạo thư mục theo dõi và sao chép-dán CSS và JS để nó được nhúng đúng cách.

Không thể tìm thấy các tệp JavaScript và CSS của bạn là sự cố phía máy khách / trình duyệt liên quan đến đường dẫn URL của bạn, đó không phải là vấn đề cần khắc phục .htaccess(ít nhất là không phải trong trường hợp này) - mặc dù đó là do bạn đang thay đổi điều này Đường dẫn URL (trong .htaccess) mà bạn đang gặp vấn đề này.

Như @closetnoc đã đề xuất trong các bình luận, vấn đề này xảy ra do sử dụng các URL tương đối trong HTML của bạn. Liên quan đến cái gì? Hãy nhớ rằng, chính tác nhân / trình duyệt sẽ giải quyết các URL tương đối trong HTML của bạn chứ không phải máy chủ. Vì vậy, bạn cần sửa URL của bạn; không .htaccess.

Ví dụ: nếu bạn đang tham chiếu tệp CSS của mình bằng một URL tương đối của biểu mẫu href="styles.css"(lưu ý, không có tiền tố gạch chéo) và bạn hiện đang ở URL example.com/view.php?id=15thì trình duyệt sẽ tự động giải quyết URL CSS và yêu cầu của bạn example.com/styles.css(trong thư mục gốc của tài liệu). Tuy nhiên, nếu bạn hiện đang ở URL example.com/watch/15(có hiệu quả trong /watch"thư mục con" ^{[* 1]} ) thì trình duyệt sẽ giải quyết URL CSS tương đối của bạn so với /watchthư mục con, thay vì gốc tài liệu, do đó bạn kết thúc bằng một tuyệt đối / được giải quyết URL của mẫu example.com/watch/styles.css.

( ^{[* 1]} Lưu ý rằng "thư mục con" trong ngữ cảnh này không nhất thiết là thư mục con vật lý trên máy chủ của bạn - đó là "thư mục con" trong đường dẫn URL; phân đoạn đường dẫn bổ sung. Nhưng trình duyệt không biết sự khác biệt. )

Điều tương tự cũng áp dụng nếu bạn đang sử dụng các URL tương đối trong các tài liệu lỗi tùy chỉnh của mình (được xác định bằng lệnh ErrorDocumenttrên Apache). Tài liệu lỗi tùy chỉnh có khả năng có thể được gọi trên bất kỳ URL nào, do đó, bất kỳ URL tương đối nào đối với tài nguyên tĩnh (CSS, hình ảnh, JS, v.v.) sẽ liên quan đến URL gây ra lỗi, không liên quan đến chính tài liệu lỗi (vị trí được ẩn một cách hiệu quả từ tác nhân người dùng).

Nếu bạn đã thay đổi URL JavaScript và CSS của mình thành gốc tương đối (bắt đầu bằng dấu gạch chéo) hoặc thậm chí tuyệt đối thì bạn sẽ không gặp phải vấn đề này. Đây sẽ là phương pháp ưa thích. Ngoài ra, bạn có thể sử dụng basephần tử ...

base thẻ / phần tử

Ngoài ra, bạn có thể bao gồm một baseyếu tố trong headphần tài liệu HTML của mình (mặc dù điều này không phải không có cảnh báo của nó ^{[* 2]} ). Điều này tham chiếu URL tuyệt đối mà tất cả các URL tương đối có liên quan đến. Nói cách khác, vì bạn đang mong đợi các URL tương đối này có liên quan đến gốc tài liệu, sau đó thêm phần sau vào headphần:

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

Bây giờ, một URL tương đối như được styles.csstham chiếu trong tài liệu tại URL /watch/15sẽ yêu cầu http://example.com/styles.css, không phải http://example.com/watch/styles.css.

^{[* 2]} Tuy nhiên, có một số cảnh báo khi sử dụngbasephần tử. Một mối quan tâm chính là bất kỳURL tương đối nào được dự định nhắm mục tiêutài liệu hiện tại sẽ nhắm mục tiêu URL cơ sở thay thế. Điều này có thể ảnh hưởng đến các neo trong trang nhưhref="#top"và URL của biểu mẫu,href="?sortby=date"v.v. Và cảformcác yếu tố tự gửi bằng cách sử dụng mộtactionthuộc tínhtrống(ví dụ<form action="" ...:). Các URL tương đối nhắm mục tiêu tài liệu hiện tại sẽ cần được sửa đổi để bao gồm URL đầy đủ của trang hiện tại (có thể đánh bại điểm sử dụngbasethẻ làm giải pháp thay thế).

Tài liệu tham khảo:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/base
• /programming/1889076/what-are-the-recommendations-for-html-base-tag