Назад | Перейти на главную страницу

Nginx неправильно обслуживает CSS в простом проекте PHP

Я видел несколько примеров этого сейчас: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3001/assets/css/bootstrap.min.css". Но я не мог понять, что могло быть причиной этого.

Файлы CSS в моем простом проекте PHP не обслуживаются. Код состояния: 200, и файл загружается, и его содержимое можно просмотреть из консоли разработчика. Я также проверил /etc/nginx/mime.types файл и в нем есть запись для text/css. Наконец, вот конфигурация моего сайта:

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;
    }   
}

Даже в коде теги HTML определяют тип как 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">

Я не понимаю, что происходит.

Что интересно, файлы JS загружаются без ошибок, и если я запускаю сайт на встроенном PHP-сервере, проблем не возникает.

Основная проблема заключается в том, что вы обслуживаете весь контент через php-fpm, как статический, так и динамический контент. Обычно разрешается nginx для обслуживания статического контента. В этом случае nginx отвечает за настройку Content-Type заголовок на основе расширения файла.

В вашей текущей конфигурации все передается в php-fpm и получает значение по умолчанию Content-Type из text/html. Предположительно вы отключили security.limit_extensions чтобы заставить эту работу.

Вы можете использовать два location блоки, один для статического содержимого и один для динамического содержимого. Следующее основано на вашем вопросе и этот пример из nginx вики:

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;
    }   
}

РЕДАКТИРОВАТЬ: добавлен следующий упрощенный пример для приложений, которым не требуется информация о пути:

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;
    }   
}