Relative paths break in HTML when using mod_rewrite in .htaccess - .htaccess

I am new to .htaccess and mod_rewrite.
I am using the following rewrite rules:
RewriteRule ^wants/([0-9]+)$ /wantlist.php?wantid=$1
RewriteRule ^dashboard$ /dashboard.php
I am able to successfully redirect both the cases.
But in order to do this, I had to change the CSS, JS and other paths to absolute paths without which the CSS and JS did not load.
I was using
<script type="javascript" src="js/javascript.js"></script>
which after the rewrite rule did not work and after I changed it to
<script type="javascript" src="http://example.com/js/javascript.js"></script>
I got it to work.
The same is happening for any of the other URLs on the website.
Is there a way to bypass this as I am using relative paths almost everywhere in the site I am developing?

This is an URL resolving issue. See mod_rewrite URL info required
You could explicitly set a base URI with the BASE HTML element, for example:
<base href="/">

Related

.htaccess rewrite images path [duplicate]

I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb
This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ 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="/">
You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.

.htaccess redirect: correcting image path from localhost/folder to domain.tld [duplicate]

I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb
This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ 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="/">
You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.

why is my RewriteRule not working

I want to be able to Rewrite a following url:
www.mysite.com/en/contact
to something like this
www.mysite.com?l=en&p=contact
but keep the structure.
I tried the following RewriteRule:
RewriteEngine On
RewriteRule ^([\w-]+)/([\w-]+)/?$ index.php?l=$1&p=$2 [L]
but the browser then wants to load all the included scripts like the css from
www.mysite.com/en
How can I tell the browser, that it shouldn't follow the url link?
Or something like that
Thank you for your help
Chris
There are 2 methods to solve this:
1) Use base tag inside head tag
<base href='/'>
2)Use relative links
<link rel='stylesheet' href='/css/style.css'>
Here the browser looks for the CSS file in the folder in the root named CSS, whatever the URL request may be.

.htaccess rewrite without it affecting relative image/css/js URLs?

I need some simple help with my htaccess file, thank you in advance.
I have a number website URLs, such as:
www.site.com/index.php?page_path=solutions-overview.html
www.site.com/index.php?page_path=solutions-a.html
I want to use the RewriteEngine to change the above links to the following respectively:
www.site.com/solutions/overview
www.site.com/solutions/a
Below is the .htaccess code I am using:
RewriteEngine On
RewriteRule ^solutions/overview index.php?page_path=solutions-overview.html
RewriteRule ^solutions/a index.php?page_path=solutions-a.html
This works, however all of my images, CSS files and JS files no longer load because the page is trying to fetch the wrong URLs. For example "/images/blah.jpg" is instead loading as "/solutions/images/blah.jpg".
How can I modify the htaccess code to prevent relative URLs from changing?
Thank you!
Add this line <BASE href="http://www.yoursitename.com/"> to your page inside the <head> tag as follows:
<head>
<title>Your site title</title>
<BASE href="http://www.yoursitename.com/">
....
</head>

htaccess rewrite breaks relative paths

I have an htaccess file which maps http://www.myserver.com/home/ to http://www.myserver.com/index.php?section=home
This part works fine. The issue I am facing now is, all my images and css reside in a sub-folder named assets, i.e. http://www.myserver.com/assets/images/ http://www.myserver.com/assets/css/ etc.
After redirection the browser will look for the files under http://www.myserver.com/home/assets/images/
which causes things to break, as this is not a valid path.
I have been able to add another rewrite that maps the above to the correct sub-folder, however, Firebug shows that the images are residing in: http://www.myserver.com/home/assets/images/
I know it's not really a problem, after all, my images and css are loading just fine with this rule.
I'm just curious as to how I could make the path shown to be the actual path, which is: http://www.myserver.com/assets/images/
Pasting my htaccess file below. Thank you very much beforehand.
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^([^/]+)/assets/(css|images|js)/(.*)$ /assets/$2/$3 [NC,L]
RewriteRule ^([^/]+)/$ /index.php?section=$1 [NC,L]
The problem is that you didn’t consider that relative URLs are resolved on the base URI that is the URI of the HTML document the reference is used in. So a relative URI path like assets/images/ in an HTML document with the URI path /home/ is resolved to /home/assets/images/ instead of /assets/images/.
You cannot change this with mod_rewrite as URI resolution is done by the client and not by the server. The only solutions are:
change the base URI using the BASE element (note that this affects all relative URI);
using absolute URI paths, e.g. /assets/images/ instead of a relative assets/images/;
adjusting the relative URI path, so references in /home/ are adjusted to ../assets/images/ to reflect the path depth.
Add this line <BASE href="http://www.yoursitename.com/"> to your page inside the <head> tag as the following:
<head>
<title>Your site title</title>
<BASE href="http://www.yoursitename.com/">
....
</head>

Resources