Nginx 无法加载 css 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10075304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nginx fails to load css files
提问by user337620
I've recently decided to switch from Apache2 to Nginx. I installed Nginx on my CentOS server and setup a basic configuration. When I tried to load my site in browser (FF/Chrome) I noticed that css file is not loaded. I checked the error console and saw this message:
我最近决定从 Apache2 切换到 Nginx。我在 CentOS 服务器上安装了 Nginx 并设置了基本配置。当我尝试在浏览器（FF/Chrome）中加载我的网站时，我注意到没有加载 css 文件。我检查了错误控制台并看到了这条消息：
Error: The stylesheet http://example.com/style.css was not loaded because its MIME type, "text/html", is not "text/css".
Error: The stylesheet http://example.com/style.css was not loaded because its MIME type, "text/html", is not "text/css".
I checked Nginx configuration and everything seems to be fine:
我检查了 Nginx 配置，一切似乎都很好：
http {
include /etc/nginx/mime.types;
..........
}
The mime type for css files is correctly set in /etc/nginx/mime.types.
css 文件的 mime 类型在 /etc/nginx/mime.types 中正确设置。
text/css css;
text/css css;
Everything seems to be well configured but my css files are still not loaded. I have no explanation.
一切似乎都配置良好，但我的 css 文件仍未加载。我没有解释。
Another thing worth mentioning. Initially I installed Nginx using epel repositories and i got an old version: 0.8... It appeared to me that my problem was a bug in that version so I uninstalled 0.8 version, added nginx repository to yum and then installed latest version: 1.0.14. I thought the new version will solve my problem, but unfortunately it didn't so I am running out of ideas.
还有一点值得一提。最初我使用 epel 存储库安装了 Nginx，我得到了一个旧版本：0.8...在我看来，我的问题是该版本中的一个错误，所以我卸载了 0.8 版本，将 nginx 存储库添加到 yum，然后安装了最新版本：1.0。 14. 我以为新版本会解决我的问题，但不幸的是它没有，所以我的想法已经用完了。
I appreciate any help.
我很感激任何帮助。
Configuration files:
配置文件：
/etc/nginx/nginx.conf
/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
/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
/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
..........................................
}
采纳答案by user337620
I found an workaround on the web. I added to /etc/nginx/conf.d/default.conf the following:
我在网上找到了一个解决方法。我在 /etc/nginx/conf.d/default.conf 中添加了以下内容：
location ~ \.css {
add_header Content-Type text/css;
}
location ~ \.js {
add_header Content-Type application/x-javascript;
}
The problem now is that a request to my css file isn't redirected well, as if root is not correctly set. In error.log I see
现在的问题是对我的 css 文件的请求没有很好地重定向，好像 root 没有正确设置。在 error.log 我看到
2012/04/11 14:01:23 [error] 7260#0: *2 open() "/etc/nginx//html/style.css"
2012/04/11 14:01:23 [错误] 7260#0：*2 open()“/etc/nginx//html/style.css”
So as a second workaround I added the root to each defined location. Now it works, but seems a little redundant. Isn't root inherited from / location ?
因此，作为第二个解决方法，我将根添加到每个定义的位置。现在它可以工作了，但似乎有点多余。root 不是从 / location 继承的吗？
回答by Amnon
Putting the include /etc/nginx/mime.types;under location / {instead of under http {solved the issue for me.
放在 include /etc/nginx/mime.types;下面location / {而不是下面http {为我解决了这个问题。
回答by zamnuts
style.cssis actually being process via fastcgi due to your "location /" directive. So it is fastcgi that is serving up the file (nginx > fastcgi > filesystem), and not the filesystem directly (nginx > filesystem).
style.css由于您的“位置/”指令，实际上正在通过 fastcgi 进行处理。因此，是 fastcgi 提供文件 ( nginx > fastcgi > filesystem)，而不是直接提供文件系统 ( nginx > filesystem)。
For a reason I have yet to figure out (I'm sure there's a directive somewhere), NGINX applies the mime type text/htmlto anything being served from fastcgi, unless the backend application explicitly says otherwise.
出于我尚未弄清楚的原因（我确定某处有指令），NGINX 将 mime 类型应用于text/html从 fastcgi 提供的任何内容，除非后端应用程序明确另有说明。
The culprit is this configuration block specifically:
罪魁祸首是这个配置块：
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;
}
It should be:
它应该是：
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;
}
This change makes sure only *.phpfiles are requested from fastcgi. At this point, NGINX will apply the correct MIME type. If you have any URL rewriting happening, you must handle this beforethe location directive (location ~\.php$) so that the correct extension is derived and properly routed to fastcgi.
此更改确保仅从*.phpfastcgi 请求文件。此时，NGINX 将应用正确的 MIME 类型。如果发生任何 URL 重写，则必须在位置指令 ( )之前处理此问题，location ~\.php$以便派生正确的扩展名并正确路由到 fastcgi。
Be sure to check out this article regarding additional security considerations using try_files. Given the security implications, I consider this a feature and not a bug.
请务必查看这篇关于使用try_files. 鉴于安全隐患，我认为这是一个功能而不是一个错误。
回答by Jonathan Vanasco
I ran into this issue too. It confused me until I realized what was wrong:
我也遇到了这个问题。这让我很困惑，直到我意识到出了什么问题：
You have this:
你有这个：
include /etc/nginx/mime.types;
default_type application/octet-stream;
You want this:
你要这个：
default_type application/octet-stream;
include /etc/nginx/mime.types;
there appears to either be a bug in nginx or a deficiency in the docs (this could be the intended behavior, but it is odd)
nginx 中似乎存在错误或文档中存在缺陷（这可能是预期的行为，但很奇怪）
回答by unVerum
I followed some tips from the rest answers and discovered that these odd actions helped (at least in my case).
我遵循了其他答案中的一些提示，发现这些奇怪的行为有所帮助（至少在我的情况下）。
1) I added to server block the following:
1）我在服务器块中添加了以下内容：
location ~ \.css {
add_header Content-Type text/css;
}
I reloaded nginx and got this in error.log:
我重新加载了 nginx 并在 error.log 中得到了这个：
2015/06/18 11:32:29 [error] 3430#3430: *169 open() "/etc/nginx/html/css/mysite.css" failed (2: No such file or directory)
2015/06/18 11:32:29 [error] 3430#3430: *169 open() "/etc/nginx/html/css/mysite.css" failed (2: 没有那个文件或目录)
2) I deleted the rows, reloaded nginx and got working css. I can't explain what happend because my conf file became such as before.
2）我删除了行，重新加载了 nginx 并使用了 css。我无法解释发生了什么，因为我的 conf 文件变得像以前一样。
My case was clean xubuntu 14.04 on VirtualBox, nginx/1.9.2, a row 127.51.1.1 mysitein /etc/hosts and pretty simple /etc/nginx/nginx.conf with a server block:
我的情况是 VirtualBox 上的干净 xubuntu 14.04、nginx/1.9.2、127.51.1.1 mysite/etc/hosts 中的一行和非常简单的 /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/;
}
}
}
回答by Promise Preston
I also face this issue, I tried a lot of solutions, but none really worked for me
我也面临这个问题，我尝试了很多解决方案，但没有一个真正适合我
Here's how I solved it;
这是我解决它的方法；
A. Grant ownership of the domain document root directory (say my root directory is/var/www/nginx-demo) to the Nginx user (www-data) to avoid any permission issues:
一个。将域文档根目录（假设我的根目录是/var/www/nginx-demo）的所有权授予Nginx 用户 ( www-data) 以避免任何权限问题：
sudo chown -R www-data: /var/www/nginx-demo
B.Confirm that your virtual host server block conforms to this standard (say I am using localhostas my server_name and my root as /var/www/nginx-demo/website)
B.确认您的虚拟主机服务器块符合此标准（假设我使用localhost作为我的 server_name 和我的根作为/var/www/nginx-demo/website）
server {
listen 80;
listen [::]:80;
server_name localhost;
root /var/www/nginx-demo/website;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
C.Test the Nginx configuration for correct syntax:
C.测试 Nginx 配置的正确语法：
sudo nginx -t
If there are no errors in the configuration syntax the output will look like this:
如果配置语法中没有错误，输出将如下所示：
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
D.Restart the Nginx service for the changes to take effect:
D.重启 Nginx 服务使更改生效：
sudo systemctl restart nginx
E.Hard refresh your website in your browser to avoid cached files with incorrect headers using the keyboard keys Ctrl + F5or Ctrl + Fn + F5.
E.在浏览器中硬刷新您的网站，以避免使用键盘键Ctrl + F5或Ctrl + Fn + F5缓存带有错误标题的文件。
That's all.
就这样。
I hope this helps.
我希望这有帮助。
回答by Sanjeev
For me this was ad blocker installed on web browser. It was not letting load the style.css
对我来说，这是安装在网络浏览器上的广告拦截器。它不让加载 style.css
回答by GilbertS
In your nginx.conf file, add mime.types to your
httpbody like so:http { include /etc/nginx/mime.types; include /etc/nginx/conf.d/*.conf; }Now go to the terminal and run the following to reload the server:
sudo nginx -s reloadOpen your web browser and do a hard reload: Right click on the reload button and select hard reload. On Chrome you can do Ctrl+Shift+R
在您的 nginx.conf 文件中，将 mime.types 添加到您的
http正文中，如下所示：http { include /etc/nginx/mime.types; include /etc/nginx/conf.d/*.conf; }现在转到终端并运行以下命令以重新加载服务器：
sudo nginx -s reload打开您的网络浏览器并进行硬重载：右键单击重载按钮并选择硬重载。在 Chrome 上你可以做Ctrl+ Shift+R
回答by nachoreimat
I had the same problem in Windows. I solved it adding: include mime.types;under http{in my nginx.conf file. Then it still didn't work.. so I looked at the error.logfile and I noticed it was trying to charge the .css and javascript files from the file path but with an /http folder between. Ex: my .css was in : "C:\Users\pc\Documents\nginx-server/player-web/css/index.css" and it was taking it from: "C:\Users\pc\Documents\nginx-server/html/player-web/css/index.css" So i changed my player-web folder inside an html folder and it worked ;)
我在 Windows 中遇到了同样的问题。我解决了添加：include 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 -server/ html/player-web/css/index.css" 所以我在 html 文件夹中更改了我的 player-web 文件夹并且它工作了;)
回答by Young Emil
I actually took my time went through all the above answers on this page but to no avail. I just happened to change the owner and the permissions of directory and sub-directories using the following command.I changed the owner of the web project directory in /usr/share/nginx/htmlto the rootuser using:
我实际上花了我的时间浏览了此页面上的所有上述答案，但无济于事。我只是碰巧使用以下命令更改了目录和子目录的所有者和权限。我使用以下命令将 Web 项目目录的所有者更改/usr/share/nginx/html为root用户：
chown root /usr/share/nginx/html/mywebprojectdir/*
chown root /usr/share/nginx/html/mywebprojectdir/*
And finally changed the permissions of that directory and sub-directories using:
最后使用以下方法更改了该目录和子目录的权限：
chmod 755 /usr/share/nginx/html/mywebprojectdir/*
chmod 755 /usr/share/nginx/html/mywebprojectdir/*
NOTE: if denied , you can use sudo
注意：如果被拒绝，您可以使用sudo
