Nginx not serving CSS correctly in simple PHP project

Question

I've seen several examples of this now: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3001/assets/css/bootstrap.min.css". But, I've not been able to understand what might be causing it.

The CSS files in my simple PHP project are not being served. The status code is 200, and the file does load and its contents can be viewed from the developer console. I also checked the /etc/nginx/mime.types file and it has an entry for text/css. Finally, here's my site config:

server {
    listen 3001 default_server;
    listen [::]:3001 default_server;

    server_name _;

    location / { 
        root /media/common/code/projects/newdf;
        try_files $uri $uri/ =404;
        include fastcgi_params;
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
    }   
}

Even in the code, the HTML tags specify the type as text/css:

<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/style.css">

I'm at a loss to understand what's going on.

Interestingly, JS files are loaded without error, and if I run the site on the built-in PHP server, there are no problems.

Richard Smith · Accepted Answer · 2017-06-19T16:31:52.193

The fundamental problem is that you are serving all content via php-fpm, both static content and dynamic content. It is usual to allow nginx to serve static content, in which case, nginx is responsible for setting the Content-Type header based on the file extension.

In your current configuration, everything is passed to php-fpm and receives the default Content-Type of text/html. Presumably you have disabled security.limit_extensions to make this work.

You could use two location blocks, one for static content and one for dynamic content. The following is based on your question and this example from the nginx wiki:

server {
    listen 3001 default_server;
    listen [::]:3001 default_server;

    root /media/common/code/projects/newdf;
    index index.php;

    location / { 
        try_files $uri $uri/ =404;
    }

    location ~ [^/]\.php(/|$) {
        fastcgi_split_path_info ^(.+?\.php)(/.*)$;
        if (!-f $document_root$fastcgi_script_name) {
            return 404;
        }

        include fastcgi_params;
        fastcgi_index index.php;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        fastcgi_param HTTP_PROXY "";
        fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
    }   
}

EDIT: Added the following simplified example for applications that do not require path info:

server {
    listen 3001 default_server;
    listen [::]:3001 default_server;

    root /media/common/code/projects/newdf;
    index index.php;

    location / { 
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        try_files $uri =404;

        include fastcgi_params;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        fastcgi_param HTTP_PROXY "";
        fastcgi_param SCRIPT_FILENAME $request_filename;
    }   
}

So `try_files` is for static content, whereas `fastcgi_split_path_info` is for dynamic? By the way, what does the first line inside the dynamic block do? — ankush981, Jun 19 '17 at 16:18
The [`try_files` directive](http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files) does not serve content - it just tests for the presence of a file within the document root. The [`fastcgi_split_path_info` directive](http://nginx.org/en/docs/http/ngx_http_fastcgi_module.html#fastcgi_split_path_info) is part of the FastCGI module and breaks down URIs into script name and path info. Your current configuration uses it, so I gave you an example which also uses it. If your application does not use path info, you can simplify the configuration somewhat. — Richard Smith, Jun 19 '17 at 16:28

Nginx not serving CSS correctly in simple PHP project

1 Answers1