Pretty URL using mod_rewrite path issue

Question

I am using MOD_REWRITE to channel all URLs through a single file. The aim is to allow pretty urls like:

http://mysite.com/shop/electrical/hoover

or

etc etc

I achieve this using the following .htaccess file:

# Turn on the RewriteEngine
RewriteEngine On
#
#  Rules
#
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . urlbug.htm

This is the stripped down HTML file that does all the work:

<!doctype html>
<html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all"    rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3><a href="#">Home</a></h3><div>
<ul class="submenu"><li><a href="#" title="Clear Counters">Clear Counters</a></li></ul>
</div>
<h3><a href="#">Maintan Tables</a></h3>
<div>
<ul class="submenu">
<li><a href="#" title="Stock">Stock</a></li>
<li><a href="#" title="Categories">Categories</a></li>
<li><a href="#" title="Designers">Designers</a></li>
</ul>
</div>
<h3><a href="#">User Database</a></h3><div><ul class="submenu"></ul></div>
</div>
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/plugins.js"></script>
</body></html>

This works if you visit a URL like:

http://www.facebookanswers.co.uk/code/foobar/works

However, if you try a URL like:

http://www.facebookanswers.co.uk/code/foobar/no/longer/works

Then the URL will load, however, none of the CSS or JS files will load.

This is because I am using relative URLs.

If I instead use absolute URLs, then all works fine. I have set up a different folder to demonstrate this:

http://www.facebookanswers.co.uk/code/foobar2/works

and

http://www.facebookanswers.co.uk/code/foobar2/works/as/well

This is the code with the absolute URLs:

<!doctype html>
<html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="http://www.facebookanswers.co.uk/code/foobar2/css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3><a href="#">Home</a></h3><div>
<ul class="submenu"><li><a href="#" title="Clear Counters">Clear Counters</a></li></ul>
</div>
<h3><a href="#">Maintan Tables</a></h3>
<div>
<ul class="submenu">
<li><a href="#" title="Stock">Stock</a></li>
<li><a href="#" title="Categories">Categories</a></li>
<li><a href="#" title="Designers">Designers</a></li>
</ul>
</div>
<h3><a href="#">User Database</a></h3><div><ul class="submenu"></ul></div>
</div>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-1.7.1.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/plugins.js"></script>
</body>
</html>

Somewhere along the line, the path is getting confused. What is the best way around this? I would like to keep relative URLs if possible, as the code I am developing will be used on a number of sites. Its not the end of the world if I have to use absolute URLs, and I know that there are performance benefits in absolute URLs, but it seems odd that the browser will happily load the URL, but then think that it is stored somewhere else!

I don't think the problem is in your `RewriteRule`, but instead your resource paths in your HTML code. — Jason McCreary, May 19 '12 at 16:34

score 1 · Accepted Answer · answered May 19 '12 at 16:37

Use root relative URLs.

The problem is that the browser sees a URL like http://www.facebookanswers.co.uk/code/foobar/no/longer/works so a relative link would resolve as http://www.facebookanswers.co.uk/code/foobar/no/longer/works/code/foobar2/css... and so on.

Instead use this...

<link type="text/css" href="/code/foobar2/css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>

By starting with a / you're forcing it to be relative to the root of the website, but by not specifying the domain, it'll work just fine if you deploy on another site. This is really just an HTML issue rather than a mod-rewrite one.

Take a look at your server access logs and you'll see what pages are being requested, and you'll see they're not what you were expecting.

Site-wide resources are always best referred to with root-relative URLs - it means you don't need to adjust them based on where you are in the site, and it makes them portable between sites (which is handy if, like me you have your development site on a local machine with a different domain name - I use www.example.com.dev when working locally on www.example.com)

Indeed it does, as the link below demonstrates. Thanks for the prompt response. http://www.facebookanswers.co.uk/code/foobar3/works/with/root/relatives — Relaxing In Cyprus, May 19 '12 at 16:45

Pretty URL using mod_rewrite path issue

1 Answers1