Nginx não servindo CSS corretamente no projeto PHP simples

Question

Já vi vários exemplos disso agora: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3001/assets/css/bootstrap.min.css" . Mas não consegui entender o que poderia estar causando isso.

Os arquivos CSS no meu projeto PHP simples não estão sendo exibidos. O código de status é 200 e o arquivo é carregado, e seu conteúdo pode ser visualizado no console do desenvolvedor. Também verifiquei o arquivo /etc/nginx/mime.types e ele tem uma entrada para text/css . Finalmente, aqui está a minha configuração do site:

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

Mesmo no código, as tags HTML especificam o tipo como 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">

Não sei o que está acontecendo.

Curiosamente, os arquivos JS são carregados sem erros e, se eu executar o site no servidor PHP integrado, não haverá problemas.

    

Answer 1

O problema fundamental é que você está veiculando todo o conteúdo via php-fpm , tanto conteúdo estático quanto conteúdo dinâmico. É comum permitir que nginx veicule conteúdo estático. Nesse caso, nginx é responsável por definir o cabeçalho Content-Type com base na extensão do arquivo.

Na sua configuração atual, tudo é passado para php-fpm e recebe o padrão Content-Type de text/html . Presumivelmente, você desabilitou security.limit_extensions para fazer isso funcionar.

Você pode usar dois blocos location , um para conteúdo estático e um para conteúdo dinâmico. O que se segue baseia-se na sua pergunta e exemplo do 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: Adicionado o seguinte exemplo simplificado para aplicativos que não exigem informações de caminho:

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