CODEWITHSUNDEEP
phpcssapache.htaccessmod-rewrite
Subhan
Subhan

Reputation: 1634

URL Rewriting adding slash at the end breaks my css links

I'm using Apache mod_rewrite to rewrite my url's in a PHP application. I have a login.php in my application root. I wrote the following lines in .htaccess file (I'm using HTML5 boilerplate's htaccess):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule  ^signin/?$  login.php
</IfModule>

adding a slash at the end of the name ^signin/?$ broke all the css links of this page.

I'm using relative links for css there such as: 

<link href="css/bootstrap-reset.css" rel="stylesheet">

I'm very new to URL rewriting and htaccess stuff, since i'm learning all this i would love to know why is this behavior occurring?

Upvotes: 2

Views: 3644

Answers (3)

anubhava
anubhava

Reputation: 786091

One way is to have a new redirect rule to remove trailing slash and then your css/js would not be a problem:

RewriteEngine On
RewriteBase /apx/

# remove trailing slash from non-directories
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+?)/$ $1 [NE,R=302,L]

RewriteRule ^signin/?$ login.php [L,NC]

However also consider using absolute paths for css/js e.g.

<link href="/css/style.css" rel="stylesheet">

Or else you can add this in the <head> section of your page's HTML: 

<base href="/apx/" />

Upvotes: 2

Nytrix
Nytrix

Reputation: 1139

Use <base href="base link" /> This will set the base of links,img basically everything. This will fix the links. Example: <base href="/" />

Upvotes: 1

Jon Lin
Jon Lin

Reputation: 143946

When your browser goes to http://example.com/signin/ the relative base URI becomes /signin/. This means every relative link in the content of that entire page will have /signin/ appended to it as the URL base. The original link was just /login.php, which makes the base URI /. Your browser doesn't know anything about your rewrite rules, just what it sees in the location bar.

You need to change all your links to absolute URLs (with a leading /) or specify a relative base URI in the page's header (inside the <head> </head> tags):

<base href="/" />

Upvotes: 4

Related Questions