HTTP请求头引发的诡异BUG

简介

项目是去年的项目，用的前端框架是AngularJS+gulp构建。

因为知道AngularJS有模板缓存机制，所以在之前的项目里，如果修改了模板想要查看最新的效果，一般都是刷新按钮右键，清空缓存并硬性重新加载。

或者就是配置个轻量级的本地服务器http-server，执行命令强制禁用缓存，就不需要每次刷新。

http-server -c-1

但是发布到线上以后就会有问题了，因为用的是IIS服务，又没有配置缓存。每次更新服务器上的模板后，领导总是说他哪里看不到。还有更神奇的，领导说有时候打开页面会显示一片空白？？？这怎么可能，怎么可能会有这种事。我一直跟她强调不可能，我的电脑都没有这种情况！随即被叫到她的电脑前查看，并告诉她要强制刷新就好了，边说边给她演示。强制刷新后跟他说，看吧没问题吧。

再刷新，卧槽！真的空白了。

随即回去在自己的电脑上试，偶尔会出现这样的情况，可是为什么呢，以前都这样用没有问题啊！

问题还是要解决的？？？！！！

没办法，老老实实的回去查找问题。

查找问题

分析问题第一步

先要看看有没有异步请求，毕竟我的所有页面（模板）都是异步调用的。打开控制台，在network->XHR里查看页面空白时的response。获取页面时有请求，但请求的内容让窝大吃一惊，完全不是我写的模板该有的内容。随后去网上查找了这些代码的意思，百度找不到相关的内容。随即FQGoogle。找到的讨论说可能是网络劫持，页面空白时响应的内容里包含一个IP地址，查询IP后得知这是网络运行商的服务器地址。又联想到公司对上网有限制，所以怀疑是公司的防火墙引发的问题。

但是，在自己家里的时候偶尔也会出这样的问题。这就让我丈二和尚摸不着头脑，问公司的后台，其他同事，都说没有遇到过这样的情况。这就神奇了啊！！

好在我加过一个AngularJS的QQ群，把我的问题发到群里，结果没人鸟我。无奈只能求助群主（破狼--AngularJS的布道者），希望他能帮我解答一二。当我把问题发给群主，恳切希望他可以帮我分析下是什么原因，可群主说他忙没有时间，我谢过以后指望他有空的时候能帮我看下，结果也没有下文了。

分析问题第二步

无奈只能自己动手，丰衣足食了。我分析原因可能是处在HTTP请求上，随即把异步请求HTML页面的请求头和请求接口的请求头拿出来做比较

 

并没有发现什么不同。随即重新做了一个DEMO，异步请求一个HTML页面，然后看到了不一样的地方

在Request Headers里看到了不一样的请求头，X-Requested-With！随即搜索这是个什么请求头，得到的结果是用来区分发送到服务器的请求是异步请求，还是同步请求！但这好像不是个标准的请求头，也不准确，因为在我异步请求接口的时候也没有这个请求头。维基百科上关于这个请求的解释是用来设置异步请求，部分框架会设置这个请求头

X-Requested-With: XMLHttpRequest

在我把这个请求头加到angular-ui-router的源代码里（用来配置路由，页面，控制器等），页面打开出现空白的问题才算解决了！无论在公司还是在家里，都没有再出现过。

总结

究其原因我也是百思不得其解，一个小小的请求居然会导致请求的页面内容为空。难道对HTML文档来说，通常只能够是同步请求，异步请求的话就会出问题？在我本地使用http-server配置的本地服务上就从来没有这样的问题，但在IIS上部署就会有。这本身也就说明了IIS上的某些配置，确切来说是对静态资源做了某些限制。