2012-04-09 153 views
52

我最近決定從Apache2切換到Nginx。我在CentOS服務器上安裝了Nginx並設置了一個基本配置。 當我嘗試在瀏覽器(FF/Chrome)中加載我的網站時,我注意到沒有加載css文件。我檢查了錯誤控制檯,看到這條消息:Nginx無法加載css文件

Error: The stylesheet http://example.com/style.css was not loaded because its MIME type, "text/html", is not "text/css".

我檢查了Nginx的配置,一切似乎是罰款:

http { 
    include /etc/nginx/mime.types; 
    .......... 
} 

CSS文件的MIME類型在/ etc正確設置/ nginx的/的mime.types。

text/css css;

似乎一切都配置好,但仍然沒有加載我的CSS文件。我沒有解釋。

另一件值得一提的事情。最初,我使用epel存儲庫安裝了Nginx,並且我得到了一箇舊版本:0.8 ...在我看來,我的問題是該版本中的一個錯誤,因此我卸載了0.8版本,將nginx存儲庫添加到yum,然後安裝最新版本:1.0。 14。我認爲新版本可以解決我的問題,但不幸的是,它並沒有讓我的想法枯竭。

我很感激任何幫助。

配置文件:

/etc/nginx/nginx.conf

user nginx; 
worker_processes 1; 

error_log /var/log/nginx/error.log warn; 
pid  /var/run/nginx.pid; 


events { 
    worker_connections 1024; 
} 


http { 
    include  /etc/nginx/mime.types; 
    default_type application/octet-stream; 

    log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 
         '$status $body_bytes_sent "$http_referer" ' 
         '"$http_user_agent" "$http_x_forwarded_for"'; 

    access_log /var/log/nginx/access.log main; 

    sendfile  on; 
    #tcp_nopush  on; 

    keepalive_timeout 65; 

    #gzip on; 

    include /etc/nginx/conf.d/*.conf; 
} 

/etc/nginx/conf.d/default.conf

server { 
    listen  80; 
    server_name localhost; 

    #charset koi8-r; 
    #access_log /var/log/nginx/log/host.access.log main; 

    location/{ 
     root /usr/share/nginx/html; 
     index index.html index.htm index.php; 
     fastcgi_pass 127.0.0.1:9000; 
     fastcgi_index index.php; 
     fastcgi_param SCRIPT_FILENAME /usr/share/nginx/html$fastcgi_script_name; 
     include  fastcgi_params; 
    } 

    #error_page 404    /404.html; 

    # redirect server error pages to the static page /50x.html 
    # 
    error_page 500 502 503 504 /50x.html; 
    location = /50x.html { 
     root /usr/share/nginx/html; 
    } 

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80 
    # 
    #location ~ \.php$ { 
    # proxy_pass http://127.0.0.1; 
    #} 

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 
    # 
    #location ~ \.php$ { 
    # root   html; 
    # fastcgi_pass 127.0.0.1:9000; 
    # fastcgi_index index.php; 
    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 
    # include  fastcgi_params; 
    #} 

    # deny access to .htaccess files, if Apache's document root 
    # concurs with nginx's one 
    # 
    #location ~ /\.ht { 
    # deny all; 
    #} 
} 

/etc/nginx/mime.types

types { 
    text/html        html htm shtml; 
    text/css        css; 
    text/xml        xml; 
    image/gif        gif; 
    image/jpeg       jpeg jpg; 
    application/x-javascript    js; 
    application/atom+xml     atom; 
    application/rss+xml     rss; 
    .......................................... 
    other types here 
    .......................................... 
} 
+0

請貼在你的配置代碼。通常你已經很好地處理了其他類型的文件,並且跳過了你的公共文件部分,導致像CSS和圖像資產返回404錯誤,或者在你的情況下,MIME類型錯誤 – Kristian 2012-04-09 15:14:04

回答

21

我在網上找到了解決方法。我加入/etc/nginx/conf.d/default.conf如下:

location ~ \.css { 
    add_header Content-Type text/css; 
} 
location ~ \.js { 
    add_header Content-Type application/x-javascript; 
} 

現在的問題是,我的CSS文件的請求不重定向很好,好像根本沒有正確設置。 在error.log中我看到

2012/04/11 14時01分23秒[錯誤] 7260#0:* 2打開() 「/etc/nginx//html/style.css」

所以作爲第二個解決方法,我將根添加到每個定義的位置。 現在它可以工作,但似乎有點多餘。不是從/ location繼承的根嗎?

+2

這是一個nginx錯誤嗎?這是我能夠實現它的唯一途徑。順便說一句,我使用的是Arch Linux,nginx 1.4.1-3。 – tprk77 2013-05-30 02:53:16

+0

@ tprk77不是一個錯誤,接受的答案是解決方法,對於一個適當的解決方案看到我的答案http://stackoverflow.com/a/23282158/1481489 – zamnuts 2014-06-25 16:07:31

57

include /etc/nginx/mime.types;置於location/{而不是http {爲我解決了這個問題。

+2

還注意到,如果你是從頭開始配置 - 除了mime類型外,''mime.types;''可以完成它的工作,因爲(至少在windows上,nginx 1.5.2)只是相對於其他配置文件。 – omilke 2013-07-10 07:11:48

+4

也注意到,您應該在瀏覽器中完全刷新網站,例如使用Ctrl + F5進行刷新以避免獲取具有不正確標題的緩存文件。 – CarelZA 2014-01-23 08:09:09

+0

這令人驚訝的工作!什麼??! – rclai 2014-09-01 07:47:48

5

我也遇到過這個問題。這讓我感到困惑,直到我意識到發生了什麼事:

你有這樣的:

include  /etc/nginx/mime.types; 
default_type application/octet-stream; 

你想這樣的:

default_type application/octet-stream; 
include  /etc/nginx/mime.types; 

似乎要麼是nginx的或錯誤的缺陷docs(這可能是預期的行爲,但它很奇怪)

+3

這並沒有解決與Nginx/1.6.0的Windows上的問題 – zamnuts 2014-04-24 21:40:15

15

style.css實際上是由於您的「位置/」指令通過fastcgi處理。所以它是fastcgi提供文件(nginx > fastcgi > filesystem),而不是文件系統直接(nginx > filesystem)。因爲我有一個理由(我確定有一個指令在某處),NGINX將MIME類型text/html應用於從fastcgi提供的任何東西,除非後端應用程序明確說明了其他情況。

罪魁禍首是這個配置塊具體爲:

location/{ 
    root /usr/share/nginx/html; 
    index index.html index.htm index.php; 
    fastcgi_pass 127.0.0.1:9000; 
    fastcgi_index index.php; 
    fastcgi_param SCRIPT_FILENAME /usr/share/nginx/html$fastcgi_script_name; 
    include  fastcgi_params; 
} 

它應該是:

location ~ \.php$ { # this line 
    root /usr/share/nginx/html; 
    index index.html index.htm index.php; 
    fastcgi_split_path_info ^(.+\.php)(/.+)$; #this line 
    fastcgi_pass 127.0.0.1:9000; 
    fastcgi_index index.php; 
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; # update this too 
    include  fastcgi_params; 
} 

這一變動使得確保只有*.php文件從FastCGI的請求。此時,NGINX將應用正確的MIME類型。如果您有任何URL重寫發生,您必須在位置指令(location ~\.php$)之前處理此,以便導出正確的擴展名並正確路由到fastcgi。

一定要檢查出this article regarding additional security considerations using try_files。鑑於安全影響,我認爲這是一個功能,而不是一個錯誤。

+1

這應該是公認的答案,另請參閱:http://forum.nginx.org/read.php?2,155222 ,155261#msg-155261 – 2015-03-13 09:40:49

+1

看來,這仍然是一個問題,在原始問題超過4年後。如果你只提供靜態內容,如** no ** PHP,那麼正確的配置如何? – rob 2016-05-19 23:36:52

0

我跟隨其他答案的一些提示,發現這些奇怪的行爲有幫助(至少在我的情況下)。

1)I加入到服務器塊以下:

location ~ \.css { 
add_header Content-Type text/css; 
} 

我重新加載nginx的和在error.log中得到這個:

2015年6月18日11時32分29秒[錯誤] 3430 #3430:* 169 open()「/etc/nginx/html/css/mysite.css」失敗(2:沒有這樣的文件或目錄)

2)我刪除了行,重新加載nginx並獲得了工作的CSS。 我無法解釋發生了什麼,因爲我的conf文件變得像以前一樣。

我的情況是乾淨的Xubuntu 14.04 VirtualBox上,nginx的/ 1.9.2,在/ etc/hosts中排127.51.1.1 mysite和非常簡單/etc/nginx/nginx.conf與服務器塊:

user nginx; 
worker_processes 1; 

error_log /var/log/nginx/error.log warn; 
pid /var/run/nginx.pid; 

events { 
    worker_connections 1024; 
} 

http { 
    include /etc/nginx/mime.types; 

    server { 
     listen 80; 
     server_name mysite; 

     location/{ 
      root /home/testuser/dev/mysite/; 
     } 
    } 
} 
-1

將此添加到您的ngnix conf文件中

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://assets.zendesk.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'"; 
0

我在Windows中遇到了同樣的問題。 我解決了它添加:包括mime.types;根據我的nginx.conf文件中的http {。 然後,它仍然沒有工作..所以我看着error.log文件,我注意到它試圖從文件路徑收取.css和javascript文件,但與/ http文件夾之間。例如: 我的.css文件位於:「C:\ Users \ pc \ Documents \ nginx-server/player-web/css/index.css」 ,它取自:「C:\ Users \ pc \ Documents \ nginx的服務器/ HTML /player-web/css/index.css」 所以我改變了我的播放器的Web文件夾中的HTML文件夾內,它的工作;)