Apache Serving CSS/JS Files but Browsers Fail to Render: Client-Side Execution Issues


2 views

When Apache serves static assets perfectly (HTTP 200) yet browsers refuse to execute them, we're typically dealing with one of these underlying issues:

// Example of problematic .htaccess that might cause MIME issues
<IfModule mod_mime.c>
    AddType text/css .css
    AddType application/javascript .js
</IfModule>

First, verify the response headers using browser dev tools (Network tab) or curl:

curl -I http://yourserver.com/style.css
HTTP/1.1 200 OK
Date: Thu, 01 Jan 2023 00:00:00 GMT
Server: Apache/2.2.15
Last-Modified: Wed, 31 Dec 2022 23:59:59 GMT
Content-Type: text/plain  <-- Wrong MIME type!

1. Incorrect MIME Types
Apache might be serving files with wrong Content-Type headers. Check your mime.types file:

# Location: /etc/mime.types
text/css                   css
application/javascript     js

2. File Permissions
Even with correct MIME, execution may fail if permissions are too restrictive:

chmod 644 /var/www/html/*.css
chmod 644 /var/www/html/*.js

UTF-8 Byte Order Marks can break script execution. Use hexdump to check:

hexdump -C your.js | head -n 1
00000000  ef bb bf 76 61 72 20 78 20 3d 20 31 3b  |...var x = 1;|

For CentOS 6.2's Apache 2.2, ensure these directives exist:

<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
    DefaultType None
</Directory>

Here's how I fixed this on a production server last week:

# Step 1: Verify module loading
httpd -M | grep mime
# Output should include: mime_module (shared)

# Step 2: Force MIME types in virtual host
<VirtualHost *:80>
    AddType text/css .css
    AddType application/javascript .js
</VirtualHost>

# Step 3: Clear browser cache completely
# (Ctrl+Shift+Del in Chrome/Firefox)

As last resort, recreate the default Apache configuration:

mv /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.bak
yum reinstall httpd

When Apache2 serves HTML, CSS, and JavaScript files correctly but browsers fail to execute them, we're typically dealing with one of these underlying issues:

# Example of a problematic .htaccess configuration
<FilesMatch "\.(js|css)$">
    Header set Content-Type "text/plain"
</FilesMatch>

First, let's verify the server headers using curl:

curl -I http://yourserver.com/style.css
HTTP/1.1 200 OK
Date: Mon, 15 Aug 2022 14:30:22 GMT
Server: Apache/2.2.15 (CentOS)
Last-Modified: Thu, 11 Aug 2022 09:12:45 GMT
Content-Type: text/plain  # THIS SHOULD BE text/css

For CentOS 6.2 with Apache 2.2, add these directives:

# In /etc/httpd/conf/httpd.conf or virtual host config
AddType application/javascript .js
AddType text/css .css

<FilesMatch "\.(js|css)$">
    Header unset X-Content-Type-Options
    Header set Cache-Control "public, max-age=86400"
</FilesMatch>

The mime.types file should contain these essential entries:

text/css                   css
application/javascript     js

Check these key indicators in the Network tab:

  • Status code 200 for all assets
  • Correct Content-Type headers
  • No CORS errors in console

If using mod_deflate, ensure proper configuration:

AddOutputFilterByType DEFLATE text/css application/javascript

Improper caching can cause browsers to ignore fresh files:

<IfModule mod_headers.c>
    <FilesMatch "\.(js|css)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
</IfModule>

Even if files are served, incorrect permissions can cause odd behavior:

chmod 644 /var/www/html/*.css
chmod 644 /var/www/html/*.js