html响应头错误,javascript错误提示Script error.解决方案 - 轩枫阁

一、Script Error规范

script Error 是什么？

是外部加载的JS 抛出异常的时候， 出于安全方面的考虑，js错误信息中可能包含一些敏感信息，比如用户名、权限提示等，希望能够把这类信息屏蔽。目前跨域的场景下会触发这种安全限制，window.onerror无法获得具体出错信息，而只能得到Script error.

二、解决ScriptError 问题

响应头增加 access-control-allow-orgin (以下简称AC)

每个fucntion 包裹 try-catch

切面包裹入口函数， try-catch

1. 响应头增加 access-control-allow-orgin

Access-Control-Allow-Origin 回包header里设置允许cros的域

Access-Control-Allow-Credentials:true

Script标签增加 crossorigin 当1和2同时满足就拥有了打开script errors的钥匙，window.onerror就能获得详细出错信息了

哪些浏览器能打开muted errors?

Chrome 和 Firefox支持，Safari 和 ie 不支持，

所以跨域的js想在Safari下获取出错详情信息，只能用try-catch了，onerror是无能为力了。

access-control-allow-orgin 配置问题：

由于值不能设置多值，而且设置 * , 允许任何域名使用是一个很不安全的设置，所以一般会根据 浏览器请求头 refer 或则 orgin ，判断是不是白名单内的域名，是的就响应回对应的域名或则* (响应头不支持返回 *.qq.com)，。当然如果cdn只对一个业务服务也可以写死域名

script 标签上面的 crossorigin 配置问题

1. anonymous(默认)

不能带cookie

副作用，当 AC 的设置不是 * 或者不等于origin时，js直接不加载

2.use-credentials

能带上cookie

副作用，当AC的设置不等于origin时，js直接不加载(不支持 *通配符了)

其他奇葩的问题

由于浏览器的缓存，同一个资源的跨域头会被缓存，但是同一个网站中可能有不同域名请求这个资源，所以会出现资源跨域请求失败

2. 每个fucntion 包裹 try-catch

利用构建工具，对function 进行包裹，try-catch ，捕获到异常后进行上报

但是构建后生成的代码会对源代码增加大小

3. 切面包裹入口函数， try-catch

对于基于AMD和jQuery的网站，几乎所有业务函数都是通过回调异步触发的，所以我们只需要将所有异步函数包裹起来就可以捕获到大部分错误：

setTimeou ,setInterval

$.event.add 和 $.event.remove

AJAX

模块入口 define 或则 require

setTimeou、setInterval

只针对 w3c 现代的浏览器的进行包裹，ie 不进行包裹

$.event.add 和 $.event.remove

没有个dom 都有这两个方法，我们没有办法对全部重写。但是我们发现目前基本都会使用 jquery 或 zepto ，所以我们对 $.event.add 和 $.event.remove 进行了切面处理。

AJAX

跟上面的类似，我们不能重写 ajax ，但是前端开发都使用 jquery ，所以我们重写了 $.ajax

模块入口 define 或则 require

目前前端开发基本都使用了模块化管理，所以模块化的入口是非常好的入口。

提供另一个解决思路

产生 Script Error 的原因是因为请求了跨域资源(比如cdn), 可以灰度一部分用户, 直接使用主域而不是cdn上的js, 避免跨域问题。