打开网页提示错误代码net::ERR（打开网页提示错误404）

自从发布了【说说 360 网站卫士 CDN 正确使用姿势】一文以后，明月就开始关注有关 360 网站卫士使用方面的小技巧了，很多站长们提到的“hosts 回源大法”，明月感觉真的是使用 CDN 后，网站管理员必备的一种方式了，可以很好的解决使用 CDN 后， WordPress 、 Typecho 的后台登陆因 CDN 缓存策略造成的各种问题，速度上还很不错。

图片来自明月登楼博客【imydl.com】

但是，明月在通过修改 hosts 实现本地访问博客强制回源的时候，在 Chrome 浏览器下总是碰到“ERR_SPDY_PROTOCOL_ERROR”的错误提示，无论如何的清除浏览器缓存都是依然如故，而在 Firefox、IE 11、EDGE、360 极速浏览器上都可以流畅打开网站，并回源到主机，就 Chrome 浏览器下是这个错误提示。并且这个“ERR_SPDY_PROTOCOL_ERROR”几乎是我博客站点的一个顽疾，可以说是经常性的出现这个东西，看来必须要找出问题所在解决掉了，否则以后很影响工作效率的（不能使用 Chrome 对于一个站长来说真的是难受呀，有没有？）

在度娘、谷姐反复查找浏览一番后，终于通过谷姐找到了一个有效并且分析的也很全面的解决办法，明月在解决后感觉受益良多，所以今天就分享给大家。

出现“ERR_SPDY_PROTOCOL_ERROR”这个错误一般都是站点迁移、开启 HTTP/2 协议支持的时候最容易触发这个错误的发生，错误信息里面没有提到 HTTP/2， 可能是因为 HTTP/2 是从 SPDY 协议发展而来，所以错误信息还是老的 SPDY。

出现 ERR_SPDY_PROTOCOL_ERROR 可能是因为服务器发送了一个无效的 HTTP header。Chrome 处理二进制的 HTTP/2 协议时有一些严格，不会处理以空格代替破折号的 header（例如用 Referrer Policy 代替 Referrer-Policy），也不会处理带着 2 个冒号的 header（例如 Content-Security-Policy:: ...），所以检查下你的 header 是否准确。Firefox 会忽略这些无效的 header，正常显示页面。

给出一个如何找到这些有问题的 header 的方法。访问 chrome://net-internals/#events（这链接没法点击，只能复制然后粘贴到地址栏再访问），在搜索框输入你的域名（我以 example.com 为例），然后在其他标签中打开出问题的网站。返回 chrome://net-internals/#events ，选中 Source Type 是 HTTP2_SESSION 的行。

图片来自明月登楼博客【imydl.com】

在右边红色箭头所指，可以看到 HTTP/2 协议的详细信息

看到 HTTP2_SESSION_RECV_INVALID_HEADER 那行了吗？无效的 header 就在它下面，在这个问题中，无效的 header 是x-frame-options:allow-from，那么在 Nginx 的站点配置文件里注释这个 header 响应头语句后 reload nginx 网站在 Chrome 浏览器里正常可以打开了，感觉问题可能是出在 Nginx 里 header 响应头的语法不被谷歌 Chrome 支持造成的，这应该是个“兼容性”问题了，因为别的浏览器都不会出现这个错误的，看来 Chrome 要求还是蛮严格的。

终于解决这个困扰我好久的顽疾了，不得不再次吐槽一下国内的那些所谓“ERR_SPDY_PROTOCOL_ERROR”解决办法，都是抄来抄去一点儿都不严谨，出了问题碰到这些不严谨的转载文章很容易被误导的，郁闷死了都！