CODEWITHSUNDEEP
.htaccesshttp-redirecthttp-status-code-404
facechomp
facechomp

Reputation: 162

htaccess ErrorDocument 404 not working when URL ends with a slash /

Our .htaccess file has the usual 404 line, and only one rewrite rule, as below:

ErrorDocument 404 /404.html

# Suppress www. in URLs
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^www.coastmetalsolutions.com$ [NC]
    RewriteRule ^(.*)$ https://coastmetalsolutions.com/$1 [R=301,L]
</IfModule>

If you test page not found with https://coastmetalsolutions.com/test the 404 page works; if you try the same with a / slash on the end, you get a messed up page.

Note:

Oh, heheh, and I just noticed these errors in Ctrl-Shift-I: Console Errors

Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled and GET https://coastmetalsolutions.com/test/js/jquery.js net::ERR_ABORTED 404

Upvotes: 1

Views: 900

Answers (2)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60577

Understanding the problem:

An Apache 404 page will respond from multiple URL's. For example, the following are all URL's that could lead to a 404.

https://coastmetalsolutions.com/404
https://coastmetalsolutions.com/404/
https://coastmetalsolutions.com/404/page
https://coastmetalsolutions.com/404/page/

So what happens to your relative paths like <link rel="stylesheet" href="style.css">?

If you are at:

https://coastmetalsolutions.com/404

It will request:

https://coastmetalsolutions.com/style.css

If you are at:

https://coastmetalsolutions.com/404/

It will request:

https://coastmetalsolutions.com/404/style.css

And so-forth.

For this reason, you can't really use relative paths in a 404 page like this.

Option 1 (recommended):

Use more-specific URL's.

You can use a domain-relative URL instead, with a leading slash (/style.css).

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

Of-course, a protocol relative (//coastmetalsolutions.com/style.css) and absolute URL (https://coastmetalsolutions.com/style.css) would also work too.

Option 2 (not-recommended):

Sometimes web servers will be configured to redirect error pages to specific URL's to display error page (like: https://coastmetalsolutions.com/404).

However I would not recommend this approach, as it makes more HTTP requests and traffic than necessary.

Mime-type errors:

These are the result of your 404 HTML page being served where CSS and JS are expected. Once you correct those paths or upload those files, those errors should be gone.

Upvotes: 0

Abhishek Gurjar
Abhishek Gurjar

Reputation: 7476

There were multiple thing coming from this problem first you are getting 404 and your style sheets were also having 404 error but html 404 page is rendering on there access where else browser is doing strict mime checking.

Frontend

You can use absolute url on your style sheets or try with leading slashes.

like href="https://coastmetalsolutions.com/main.css" or href="/main.css"

And also you can use <base href="/"> tag in your head section you wont have to rewrite every css and js tag.

Server side

Now there is one more thing in server you can comment this section like below.

#Header set X-Content-Type-Options "nosniff"

But I am not suggesting that it will open security loop holes like hotlinking and etc.

Upvotes: 2

Related Questions