Nginx

Nginx 在簡單的 PHP 項目中無法正確提供 CSS

  • March 17, 2020

我現在已經看到了幾個這樣的例子:Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3001/assets/css/bootstrap.min.css". 但是,我無法理解可能是什麼原因造成的。

我的簡單 PHP 項目中的 CSS 文件沒有被提供。狀態碼是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-Typetext/html. 大概你已經禁用security.limit_extensions了這項工作。

您可以使用兩個location塊,一個用於靜態內容,一個用於動態內容。以下內容基於您的問題和wiki中的此範例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;
   }   
}

引用自:https://serverfault.com/questions/856640