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

1       原始需求

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

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

ansible.178linux.com =è www.178linux.com/doc/ansible

salt.178linux.com =è www.178linux.com/doc/salt

qa.178linux.com =è www.178linux.com/doc/qa

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

2       问题回放

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

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

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

2.1     初步怀疑

2.1.1  css,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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types

http://stackoverflow.com/questions/5413107/headercontent-type-text-css-is-working-in-firefox-and-chrome-but-in-inter 

2.2.1  初步怀疑

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

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

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

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

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

 

3       从源开始

3.1     Nginx配置

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的方式是无法正常解析,所以导致样式加载异常。

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

 

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

(0)
stanleystanley
上一篇 2015-06-08
下一篇 2015-06-11

相关推荐

  • 制作本地yum源(以redhat5.8通过复制光盘文件到本地)

    为什么要制作本地yum源 1、RPM安装方式很多情况下不能有效解决复杂的包依赖关系。 2、而刚安装完成系统的YUM一般是通过联网使用。 3、如果是未注册的redhat5.0以上系统,则不能联网使用yum。 我们可以改变yum库的指向,使其指向本地自己制作的yum仓库,从而轻松实现本地yum方式查询、安装应用软件了。 下面据此给大家介绍其操作方法(以Redha…

    Linux干货 2016-04-11
  • 查找 -数据结构

    几种查找算法:顺序查找,折半查找,分块查找,散列表 一、顺序查找的基本思想:  从表的一端开始,向另一端逐个按给定值kx 与关键码进行比较,若找到,查找成功,并给出数据元素在表中的位置;若整个表检测完,仍未找到与kx 相同的关键码,则查找失败,给出失败信息。 说白了就是,从头到尾,一个一个地比,找着相同的就成功,找不到就失败。很明显的缺点就是查找效…

    Linux干货 2015-07-28
  • GREP EGREP的用法及正则表达式和扩展正则表达式简述

    egrep grep的使用方法 正则表达式及扩展表达式简述 使用事例   grep egrep都是文本搜索工具,可以把符合模式的行或字符显示出来,而这些模式grep一般使用正则表达式进行匹配,而egrep使用扩展正则表达式来进行匹配的。 grep及egrep的使用方法:           &nbs…

    Linux干货 2015-07-27
  • Linux的文件系统架构基础

    前言     当今计算机操作系统来说常见功能主要有:进程调度、内存管理、文件系统管理、网络协议栈支持、驱动程序管理、安全功能等。所有对于我们来讲学习Linux文件系统也是一个十分重要的知识,也是学习Linux的必备基础知识,学习好Linux的文件系统知识也是为接下来学习Linux的其他知识奠定良好的基础 关键词  &n…

    Linux干货 2015-04-16
  • 在虚拟机上使用CentOS6的两个iso文件创建本地yum仓库和http仓库

    yum客户端和服务器端都是本虚拟机 一、创建本地磁盘访问的yum仓库 条件和要求: a.guest虚拟机需要添加2个光驱,分别装载CentOS6.4发行版的DVD1和DVD2 b.DVD1和DVD2的挂载目录分别是:/media/cdrom/下的os和extras,并设置开机挂载 c.使用CentOS-Media.repo作为yum客户端配置文件,将其他re…

    Linux干货 2015-09-22
  • 八大排序算法

    概述 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。 我们这里说说八大排序就是内部排序。     当n较大,则应采用时间复杂度为O(nlog2n)的排序方法:快速排序、堆排序或归并排序序。    快速…

    Linux干货 2015-04-07