Browser Not Rendering CSS and JS – Troubleshooting Apache 2.4

apache-2.4centos7php-fpm

I'm using:

  • CentOS 7
  • Apache 2.4
  • php56-php-fpm
  • php72-php-fpm

on my dev server. I managed to get it so I can specify a handler and it will put that vhost on the correct PHP version, however CSS and JS seem to be going awry.

I get this error:

scriptname.js was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type

which eventually leads to fatal error's. Googling it led me to various posts and I added the below first to my httpd.conf file:

AddType text/css .css
AddType text/javascript .js

But that didn't work.

I then added it to my .htaccess, again with no success.

I then found something that suggested writing it like this:

AddType 'text/css; charset=UTF-8' .css

This did fix the CSS for the most part – but not the .js.

How do I get it so everything works as expected?

(note: let me know which file contents to add and I'll edit question accordingly)

EDIT:

I've got the error messages down to:

Loading failed for the with source /path/to/file.js

By adding this to my vhost file:

<Files *.js
  Header set Content-type "text/javascript"
</Files>

Seems going to that file shows:

Access Denied

file permissions for there:

drwxr-xr-x 2 dev-admin dev-admin    42 Apr  4 11:37 ./
drwxr-xr-x 4 dev-admin dev-admin    27 Mar 12 17:21 ../
-rw-r--r-- 1 dev-admin dev-admin 86927 Mar  1 15:14 jquery.min.js
-rw-r--r-- 1 dev-admin dev-admin  5094 Apr  4 11:37 main.js

Headers on file:

enter image description here

full vhost:

<VirtualHost *:80>
    ServerName site1.development
    DocumentRoot /var/www/dev/site1
    <Directory /var/www/dev/site1>
        # removing this shows the MIME type errors from before
        <Files *.css>
            Header set Content-type "text/css"
        </Files>
        # removing this shows the MIME type errors from before
        <Files *.js>
            Header set Content-type "text/javascript"
        </Files>

        SetHandler "proxy:fcgi://127.0.0.1:9072"

        AllowOverride all
        Options Indexes FollowSymLinks
    </Directory>
</VirtualHost>

Best Answer

I think I see the problem. Your SetHandler is applying to every possible URL in the virtual host, without regard for whether it is a PHP file or not. Thus everything gets passed to PHP, even if it is a static file. And because PHP's interpreting the static file as PHP, you get the results you got.

You should instead send only requests for PHP files to the handler, by selecting them by filename:

        <FilesMatch \.php$>
            SetHandler "proxy:fcgi://127.0.0.1:9072"
        </FilesMatch>

You can then remove the unnecessary redundant <Files> bits that you had added.

Related Topic