问题描述:
将一个站搬到新架设的服务器环境中. nginx + php + mysql + CentOS ,遇到一个奇怪的问题,IE下浏览正常,但是在火狐下完全乱的。用firebug查看css,提示 “该URL 的资源不是文本 css” …应该是无法读取css文件。开始以为是浏览器兼容问题,或者是css文件里面有语法错误…但是在本地测试环境里都是正常的啊?
问题分析:
通过抓包分析获取css的数据包(请求包 Request Headers 和响应包的Response Headers),发现服务器响应包(Response Headers)的Content-Type属性为application/octet-stream;在火狐下直接输入css文件访问路径,发现弹出下 载窗口…我记得在火狐下应该能直接查看css文件内容才对的啊~~~通过比较其他正常网站的css文件请求数据包,发现他们的Content-Type的 属性是text/css~~~
于是怀疑是Content-Type的问题,查看nginx的配置文件nginx.conf
worker_processes 2;
error_log /var/log/nginx/error_log info;
events {
worker_connections 1024;
use epoll;
}
http {
#include mime.types;
default_type application/octet-stream;
log_format main
‘$remote_addr – $remote_user [$time_local] ‘
‘”$request” $status $bytes_sent ‘
‘”$http_referer” “$http_user_agent” ‘
‘”$gzip_ratio”‘;
client_header_timeout 10m;
client_body_timeout 10m;
send_timeout 10m;
connection_pool_size 256;
client_header_buffer_size 1k;
large_client_header_buffers 4 2k;
request_pool_size 4k;
…………
server {
listen 80;
server_name t.talkphp.net;
index index.html index.htm index.php;
root /var/www/htdocs/public;
location / {
index index.php;
if (!-f $request_filename) {
rewrite ^/(.+)$ /index.php?$1& last;
}
}
location ~ .*\.(php|php5)?$
{
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fcgi.conf;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)$
{
expires 1h;
}
注意http { 后面
#include mime.types;
default_type application/octet-stream;
看到了,默认是default_type是application/octet-stream,和抓包里显示的一样,可惜当初偷懒,拷贝别人的配置文件,把include mime.types给注释掉了。
解决方法: 在nginx.conf中加入include mime.types;
火狐浏览器下访问页正常了,再一次抓包分析,现在css的响应数据包的Content-Type属性为text/css;
进一步思考:
为什么IE浏览器下确是正常的呢?IE和火狐在处理MIME Types上有什么区别呢?
google了一番,
在msdn下找到如下描述:http://msdn.microsoft.com/en-us/library/ms775148(VS.85).aspx
Internet Explorer first consults the Content-Type and Content-Disposition headers for the MIME type from the HTTP server, if they exist. Next, Internet Explorer consults the registry entry for that MIME type under HKEY_CLASSES_ROOT\MIME\Database\Content Type and looks at the Extension key for the correct file extension. Internet Explorer then ensures that the file has that extension, before placing it in the local browser cache.
也就是说如果响应包的header没有指定Content-Type,IE也会先处理,会打开注册表的 “HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主键,你可以看到所有 MIME Type 的配置信息。
而Firefox的处理方式略有不同:找到依据如下:https://developer.mozilla.org/en/How_Mozilla_determines_MIME_Types
For HTTP URIs Mozilla usually gets a MIME type sent from the server, and uses it. Contrary to Internet Explorer’s MIME type guessing, Mozilla will generally not sniff the type of the document.
MIME是什么东东?
MIME是多用途的网际邮件扩充协议的缩写。对于诸如网络服务器或者浏览器程序来说,按照MIME类型将页面内容分类是一种标准方法,并且这些程序都含有一个MIME类型列表以便于在跨做操作系统的环境下用相同的方法传输同类型文本内容。
当某一服务器中的一个页面需要读取远程CSS文件的时候,根据MIME类型的定义(通常情况下是”text/css”),这个样式表文件带有.css的文 件扩展名。然而服务器有时却会错误的将.css文件的MIME类型判断为”text/plain”或者是”text/html”。因此当一个标准编译下的 页面(也就是采用完整文档声明的页面)调用这个CSS文件的时候就会被判别为不相符的MIME类型,此时基于Gecko的浏览器就会忽略远程样式表,与我 们事先想象中那样美丽的网页相反,它们会将页面展现为无任何样式定义的样子。
转载于:https://blog.51cto.com/kuiba/760298