页面异常 linux,一次css页面加载异常的折腾

1原始需求

近期在搭建平台,因多域名会分割流量,所以希望将类似

ansible.178linux.com  salt.178linux.com qa.178linux.com这些平台整合为一个平台,所示如下

以些方式最大程度提高平台整体权重。整合过程中出现一个css页面加载异常问题特总结分享

2问题回放

如图:右浏览器页面css,js,图片等样式无法加载,显示丑陋,

Chrome F12 debug追踪后发现有部分样式不加载,但该页面所有请求均能正常请求并被回应,状态值均为200,

2.1初步怀疑

2.1.1css,js目录权限问题  —失败

这个问题容易解决,验证也不成问题,

# cd /data/webapps/doc

# chown www. ansible -R

2.1.2样式文件copy遗漏  —失败

确保所有样式文件均没有遗漏,

但测试下来仍然样式渲染不正常

2.2确认所有请求回应数据

没有其它办法,只能对比doc.178linux.com正常请求来逐个请求和回应数据逐一查看,确认每个请求和回应的数据是否全部都一样.经仔细查看果然发现问题了.

1.部分css.js,能正常被辨别被正常解析为 text/css  text/javascripts,部分只能被解析为text/html

2.查看页面源码并比对发现所有源码是一样的

3.google  Content-Type: text/html发现如下几篇文章

2.2.1初步怀疑

2.2.1.1 /etc/nginx/mime.types文件没有定义 css,js解析结构  —失败

和运营环境正常配置的nginx对比后没有异常

2.2.1.2 浏览器缓存或浏览器支持问题 –失败

发现firefox,chrome均有问题,但ie正常,但原因还是无从得知

3从源开始

3.1Nginx配置

server

{

listen 80 default;

server_name www.178linux.com;

index  index.php index.html;

root  /data/webapps/;

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

error_log /var/log/nginx/error.log;

error_page   404   /404.html;

location ~ [^/]\.php(/|$){

try_files $uri =404;

fastcgi_pass  127.0.0.1:9000;

fastcgi_index index.php;

include fastcgi.conf;

#include pathinfo.conf;

}

location  ~  /doc/ansible/ {

index  index.php index.html;

try_files $uri $uri/ =404;

fastcgi_pass  127.0.0.1:9000;

fastcgi_index index.php;

include fastcgi.conf;

}

location /nginx_status {

stub_status on;

access_log   off;

}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

{

expires      30d;

}

location ~ .*\.(js|css)?$

{

expires      12h;

}

if (-f $request_filename/index.html){

rewrite (.*) $1/index.html break;

}

if (-f $request_filename/index.php){

rewrite (.*) $1/index.php;

}

if (!-f $request_filename){

rewrite (.*) /index.php;

}

}

server

{

server_name doc.178linux.com;

index  index.php index.html;

root  /data/tran/build/html/;

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

error_log /var/log/nginx/error.log;

error_page   404   /404.html;

location ~ [^/]\.php(/|$){

try_files $uri =404;

fastcgi_pass  127.0.0.1:9000;

fastcgi_index index.php;

include fastcgi.conf;

#include pathinfo.conf;

}

location /nginx_status {

stub_status on;

access_log   off;

}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

{

expires      30d;

}

location ~ .*\.(js|css)?$

{

expires      12h;

}

if (-f $request_filename/index.html){

rewrite (.*) $1/index.html break;

}

if (-f $request_filename/index.php){

rewrite (.*) $1/index.php;

}

if (!-f $request_filename){

rewrite (.*) /index.php;

}

}

清理思绪,从头再来,几经检查觉得可能性最大的还是nginx的配置问题,从这个点出发再次切入,增加如下配置后刷新再看,问题解决。

找了一番官网发现没有特别合适的说明,从配置上看我的个人理解是:

Location匹配到字段后将不会继续查找其它匹配字段,因本页面中即有简单的html页面也有css,js等样式在解析过程中找不到对应配置,所以根据配置规则全部解析为html方式,但css,js样式以html的方式是无法正常解析,所以导致样式加载异常。

原创文章，作者：stanley，如若转载，请注明出处：http://www.178linux.com/5215