2012-04-09 243 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文件夹内,它的工作;)