URL rewriting : css, js, and images not loading

2020-01-23 03:59发布

问题:

I've following rule for .htaccess

Options +FollowSymLinks

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]

RewriteRule ^detail/([0-9]+)/?$ detail.php?id=$1

It redirects http://localhost/detail/123 URL to http://localhost/detail.php?id=123. The page redirects successfully, but the problem is CSS, JS, and images are not loading,

CSS, js files are located under http://localhost/css/ and http://localhost/js/

One solution is to use absolute path (ex /CSS, or /js rather than just CSS/, /js but this does not seem a reliable solution since we've to change it on all files,

Any other solution based on .htaccess rules, which is independent of editing all PHP files and let us use "relative paths"?

回答1:

Don't be lazy and change your relative URIs in your resources to root directory absolute pathing like /css/style.css. This is the best.

You can get clever and use regex and replace all the files you need which would be like a few one liners and you're done. How many places could there be to change? And you should be using a template.

This should work but I wouldn't go this way.

RewriteRule ^detail/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]



回答2:

one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,

This is because your relative URIs have their base changed. Originally, the base is / when the page is /detail.php?id=123, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /detail/123 the base suddenly becomes /detail/ and it tries to append that in front of all relative URLs and thus none of them load.

You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):

<base href="/">


回答3:

I applied url rewriting to a project in core php. I faced the same problem. css, Js and images were not getting loaded. I used this and it worked for me. Source

# Allow any files or directories that exist to be displayed directly
RewriteCond ${REQUEST_URI} ^.+$
RewriteCond %{REQUEST_FILENAME} \.(gif|jpe?g|png|js|css|swf|php|ico|txt|pdf|xml)$ [OR]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -l
RewriteRule ^ - [L]


回答4:

Anthony's answer is perfectly valid, and he is actually trying to impart some good practices there.

However, since you do not seem content with that answer, here is a different solution. Just insert this line into your .htaccess before any Rewrite-Command:

RedirectMatch permanent ^/detail/((css|js)/.*)  /$1

It will redirect all the originally 404 requests for /details/css/style.css and /details/js/js.s to their actual location. Neither particluarly pretty nor elegant, but it simply works.



回答5:

this code perfectly work for me, add before redirect rule(RewriteRule ^detail/([0-9]+)/?$ detail.php?id=$1)

RewriteRule ^(.+)/(admin|css|fonts|ico|include|js|images)/(.*)$ $2/$3 [L]