诡异的浏览器白屏，被Nginx坑了！

点个踩… proxy_http 设置的不是浏览器到ng这段的连接协议 更改1.1也不会根源性解决问题（甚至能不能缓解我都有疑问…），浏览器跟ng的tcp连接一般6条，无论如何头几个js肯定不是同一条tcp也就更不可能是同一条http……

♥ 97 ↩ 5

其实只要稍微有点基础的人都不会犯这种低级错误。 首先，出现的是白屏这个信号就已经说明了很多问题，很多人傻傻的只知道F12开发者工具，却在做事前都不想想原因。白屏代表了浏览器开始了渲染工作，也就是当前uri的部分资源已经get到了，部分文件没有请求到，这时才会出现白屏。白屏基本可判定html已经完成合成只是在渲染时出现的异常。而up似乎连顺序都弄错了，搞了半天才定位到一个302. 接下来分析，302问题，还有些傻子说什么403这种蠢话，如果是40x错误会出现白屏吗？技术不行脑子也不好使。302是前端浏览器行为，而40x则是服务器行为，这种常识都没有还搞毛的开发。回去种地吧。既然是30x而且是302是一个重定向状态，即前端浏览器发现定位资源未找到而重定向并且找到了不过和原先的hashcode不同而给的一个found状态，这和304非常像，304则是定向浏览器本地的缓存。 第三点 就是http1.1 不能解决根本问题，1.0整体做hash才会出现一定不同的问题，一个大文件难免有小文件的改动。部分hash这样大部分文件hash相同逐文件分发大部分资源都能正确加载。

♥ 90 ↩ 13

我之前也遇到过一个nginx配置的问题，做https强制跳转的时候习惯用302做跳转，一直没出过问题，直到有一次代码里面校验了请求方法，突然发现所有http的post的请求都没法正常访问，这才知道301/302/307的区别[笑哭]

♥ 63 ↩ 13

按照示例来讲。由于存在多个web服务器，html与js不匹配，也存在两种情况，一种是3台html匹配另一台的js，一台html匹配了另外3台的js。 另外，开启http1.1这样的方式，可能更不容易发现有一台web服务器与其他服务器不一致了。现在只是文件名，如果是实质内容[笑哭]。

♥ 53 ↩ 7

这和协议有啥关系？问题就是一台服务器代码没更新造成的404，然后页面渲染是js完成的，js都没，肯定就白屏了啊，而且你只改了这台的js文件没改html文件，还是有问题，因为这台服务器的html访问的是老的js文件，不报错是因为其他几台机器上都有老的js在，当html请求负载到这台机器时页面还是老页面。至于服务器单独请求不报错，写静态资源路径都是用的相对路径和绝对路径，又不会把域名写上面，你请求c服务，资源带的就是c域名，c服务只是没更新，本身又没啥问题，你请求负载，资源带的就是负载域名啊，这时候就有服务版本不一致情况在里面了，和协议没啥关系，就是单纯的一台服务没更新或者更新失败了。

♥ 27 ↩ 1

文件找不到，返回404就行，然后404页面是可以有body来显示人性化的错误描述UI的，为什么要用3XX跳转呢？问题的根源就在于这个错误的技术设计，3xx的语义不是这么用的，用错了就要受罚。正确的技术方案是：1后端App在资源找不到时老老实实返回404。2静态资源应该由nginx缓存下来。不然为什么要用那么重的nginx，用个更轻量级的负载均衡器比如lvs不好吗？3资源内容变化，url必须也变化。（这一点通常前端技术栈的打包器都帮做好了）确保不同版本的App的静态资源可以无冲突地缓存在同一个nginx中。后端总有App版本不一致的情况，例如后端轮流重启更新App的过程中。应对这种情况要在nginx做好缓存策略，至少要缓存近两个App版本的所有静态App资源。新版App上线后要对nginx进行新App版本静态资源的全量预热，确保当这个新版本App变成老版时其对应的静态资源请求不会穿透到后端App。

♥ 25 ↩ 2

贵司前端文件竟然不统一存储？

♥ 18 ↩ 9

前段时间同花顺面试官问的就是nginx白屏问题[笑哭][笑哭]我一一说明自己的排查思路（日志、抓包、打流、链路等等），都被老头否定了，结果跟我说是长连接配置引起的，然后就说我能力不符合。我寻思你的答案是对的你的排查方法一定行，我的排查方法就排不出来了呗，妈的气死了

♥ 15 ↩ 9

一、一位程序员排查一个诡异问题的过程。通过对比浏览器窗口的差异，最终发现是服务器上前端资源包版本不同导致的问题。 00:21 - 打开线上系统首页时出现白屏，刷新后恢复正常。 01:02 - 使用内部地址访问业务服务器，发现只有一台服务器出现问题。 02:39 - 检查服务器上的JS文件，发现文件名不同于其他服务器。 二、为什么单独请求每一台服务器能正常打开页面，而经过NGINX转发以后就会出现白屏的现象，并探讨了解决该问题的方案。 03:00 - 单独请求服务器正常打开页面，经过NGINX转发出现白屏现象 04:03 - 长连接机制可以让同一条TCP连接请求多个资源 05:38 - 后端服务框架拦截文件不存在时重定向到默认错误页面，导致请求302 --以上内容由模型基于视频内容生成，仅供参考

♥ 11

这也说明你们没有把有文件指纹的JS文件设置缓存时间，这是应该设置的，还应该顺便检查一下gzip设置没有。 但是在设置了文件指纹的情况下，白屏可能就只出现一次，很长时间都不会复现了，这个bug更难查了哈哈。

♥ 10

感觉这个例子不是很好，1.1这个只能算是中间发现的一个问题，本质还是代码的拦截修改http状态码，这个操作感觉很搞。业务乱改状态码很容易导致运维的nginx监控http状态码的看板出现问题。这个文件不存在的正常报404也更容易发现这个问题

♥ 8 ↩ 4

你还有个坑没处理好，即使反向代理配置1.1，nginx默认还会添加Connection: close这个头，也就是上游仍是http短连接，需要加上proxy_set_header Connection ''这句配置才能让长连接生效。

♥ 8

为啥后端服务器重定向请求到了error page，但是浏览器渲染出来还是白屏啊？

♥ 8 ↩ 4

nginx把302处理上，或者接口禁止302就完了

♥ 5 ↩ 4

好奇两点，第一为什么自己配置静态资源的负载均衡，为什么没有使用cdn，第二点为什么静态资源不做浏览器缓存，每次都请求不是浪费资源吗

♥ 4 ↩ 4

三个问题： 一个是如果请求的是 *.js ,返回一个html的404/302文件不是什么好事情 另一个是同一用户短时间内的请求应该被转向同一个服务器，这可以通过hash请求的cookie（无cookie时回落ip地址）做到。（避免请求付款信息和实际付款两个post给两个server，或者两台服务器同时创建同名用户导致数据库爆炸之类的情况） 三是为什么有一个服务器没有同步内容，这会给后端开发留坑

♥ 3

按这个改法，版本部署不一致时，3台新版本，1台旧版本，那么用户在访问时，就会有一定数量用户访问的是旧版本，怎么？搞伪灰度发布是吧[滑稽]

♥ 3

这跟协议有什么关系，这不是你们配置有问题吗

♥ 3

为什么会默认走http1.0啊，现在新版本的都是http2了吧[思考]

♥ 3 ↩ 2

nginx支持源IP或者插入cookie进行会话保持吗？实现只要IP不变，或者插入的cookie不变，都始终会话保持在首次请求的服务器上？

♥ 3 ↩ 1