Loading... </p> <h1>1<span> </span><span style="font-family:宋体">原始需求</span></h1> <p style="text-indent:12px"><span>近期在搭建平台</span><span>,</span><span>因多域名会分割流量</span><span>,</span><span>所以希望将类似</span></p> <p style="text-indent:12px"><span>ansible.178linux.com salt.178linux.com qa.178linux.com </span><span>这些平台整合为一个平台</span><span>,</span><span>所示如下</span></p> <p style="text-indent:12px"><span>ansible.178linux.com =</span><span style="font-size:12px;font-family:Wingdings">è</span> <span>www.178linux.com/doc/ansible</span></p> <p style="text-indent:12px"><span>salt.178linux.com =</span><span style="font-size:12px;font-family:Wingdings">è</span> <span>www.178linux.com/doc/salt</span></p> <p style="text-indent:12px"><span>qa.178linux.com =</span><span style="font-size:12px;font-family:Wingdings">è</span> <span>www.178linux.com/doc/qa</span></p> <p style="text-indent:12px"><span>以些方式最大程度提高平台整体权重。整合过程中出现一个</span><span>css</span><span>页面加载异常问题特总结分享</span></p> <h1>2<span> </span><span style="font-family:宋体">问题回放</span></h1> <p><span style="font-size:12px;font-family:宋体"><img src="//cto.wang/usr/uploads/2016/07/20160703160426-38.png" title="1433919819274959.png" /></span></p> <p><span>如图</span><span>: </span><span>右浏览器页面</span><span>css,js,</span><span>图片等样式无法加载</span><span>,</span><span>显示丑陋</span><span>,</span></p> <p><span>Chrome F12 debug</span><span>追踪后发现有部分样式不加载</span><span>,</span><span>但该页面所有请求均能正常请求并被回应</span><span>,</span><span>状态值均为</span><span>200,</span></p> <h2>2.1<span> </span><span style="font-family:宋体">初步怀疑</span></h2> <h3>2.1.1<span> </span>css,js<span style="font-family:宋体">目录权限问题</span> <span style="color:red">—</span><span style="font-family:宋体;color:red">失败</span></h3> <p><span>这个问题容易解决</span><span>,</span><span>验证也不成问题</span><span>,</span></p> <p><span># cd /data/webapps/doc</span></p> <p><span># chown www. ansible -R</span></p> <h3>2.1.2<span> </span><span style="font-family:宋体">样式文件</span>copy<span style="font-family:宋体">遗漏</span> <span style="color:red">—</span><span style="font-family:宋体;color:red">失败</span></h3> <p><span>确保所有样式文件均没有遗漏</span><span>,</span></p> <p><span>但测试下来仍然样式渲染不正常</span></p> <h2>2.2<span> </span><span style="font-family:宋体">确认所有请求回应数据</span></h2> <p><span>没有其它办法,只能对比doc.178linux.com正常请求来逐个请求和回应数据逐一查看,确认每个请求和回应的数据是否全部都一样.经仔细查看果然发现问题了.</span></p> <p class="MsoListParagraph" style="margin-left:24px"><span>1.<span> </span></span><span>部分css.js,能正常被辨别被正常解析为 text/css text/javascripts,部分只能被解析为text/html</span></p> <p class="MsoListParagraph" style="margin-left:24px;text-indent:0"><span><img src="//cto.wang/usr/uploads/2016/07/20160703160427-87.png" title="1433919817670712.png" /></span></p> <p class="MsoListParagraph" style="margin-left:24px"><span>2.<span> </span></span><span>查看页面源码并比对发现所有源码是一样的</span></p> <p class="MsoListParagraph" style="margin-left:24px"><span>3.<span> </span></span><span>google Content-Type: text/html </span><span>发现如下几篇文章</span></p> <p class="MsoListParagraph" style="margin-left:24px;text-indent:0"><span>https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types</span></p> <p class="MsoListParagraph" style="margin-left:24px;text-indent:0"><span>http://stackoverflow.com/questions/5413107/headercontent-type-text-css-is-working-in-firefox-and-chrome-but-in-inter</span> </p> <h3>2.2.1<span> </span><span style="font-family:宋体">初步怀疑</span></h3> <h4>2.2.1.1 /etc/nginx/mime.types<span style="font-family:宋体">文件没有定义</span> css,js<span style="font-family:宋体">解析结构</span> —<span style="font-family:宋体">失败</span></h4> <p><span>和运营环境正常配置的</span><span>nginx</span><span>对比后没有异常</span></p> <h4>2.2.1.2 <span style="font-family:宋体">浏览器缓存或浏览器支持问题</span> –<span style="font-family:宋体">失败</span></h4> <p><span style="font-size:12px;font-family:宋体"><img src="//cto.wang/usr/uploads/2016/07/20160703160427-25.jpg" title="1433919818391152.jpg" /></span></p> <p><span>发现</span><span>firefox,chrome</span><span>均有问题</span><span>,</span><span>但</span><span>ie</span><span>正常</span><span>,</span><span>但原因还是无从得知</span></p> <p> </p> <h1>3<span> </span><span style="font-family:宋体">从源开始</span></h1> <h2>3.1<span> </span>Nginx<span style="font-family:宋体">配置</span></h2> <pre class="brush:xml;toolbar:false">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; } }</pre> <p><span style="font-size: 12px;font-family: 微软雅黑, sans-serif">清理思绪</span><span style="font-size: 12px;font-family: Cambria, serif">,</span><span style="font-size: 12px;font-family: 微软雅黑, sans-serif">从头再来</span><span style="font-size: 12px;font-family: Cambria, serif">,</span><span style="font-size: 12px;font-family: 微软雅黑, sans-serif">几经检查觉得可能性最大的还是</span><span style="font-size: 12px;font-family: Cambria, serif">nginx</span><span style="font-size: 12px;font-family: 微软雅黑, sans-serif">的配置问题</span><span style="font-size: 12px;font-family: Cambria, serif">,</span><span style="font-size: 12px;font-family: 微软雅黑, sans-serif">从这个点出发再次切入</span><span style="font-size: 12px;font-family: Cambria, serif">,</span><span style="font-size: 12px;font-family: 微软雅黑, sans-serif">增加如下配置后刷新再看</span><span style="font-size: 12px;font-family: Cambria, serif">,</span><span style="font-size: 12px;font-family: 微软雅黑, sans-serif">问题解决。</span><span> </span></p> <p><span>找了一番官网发现没有特别合适的说明</span><span>,</span><span>从配置上看我的个人理解是</span><span>:</span></p> <p><span>Location</span><span>匹配到字段后将不会继续查找其它匹配字段</span><span>,</span><span>因本页面中即有简单的</span><span>html</span><span>页面也有</span><span>css,js</span><span>等样式在解析过程中找不到对应配置</span><span>,</span><span>所以根据配置规则全部解析为</span><span>html</span><span>方式</span><span>,</span><span>但</span><span>css,js</span><span>样式以</span><span>html</span><span>的方式是无法正常解析</span><span>,</span><span>所以导致样式加载异常。</span></p> <p><span style="font-size:16px;font-family:宋体"><img src="//cto.wang/usr/uploads/2016/07/20160703160427-3.png" title="1433919818381425.png" /></span></p> <p><span> </span></p> <p></p> 最后修改:2021 年 12 月 10 日 10 : 53 AM © 允许规范转载 赞赏 如果觉得我的文章对你有用,请随意赞赏 赞赏作者 支付宝微信