本文首发于知乎【前端3分钟】Script Error产生的原因和解法，搬运转载请注明出处，否则追究版权责任。
Script Error对于前端开发者相信都不陌生，由于没有具体错误堆栈和代码行列号，成为可能是最神秘的错误之一。
下面介绍Script Error产生的原理和解决办法。
1、Script Error是如何产生的
跨域资源引用
假如：abc.com 下的页面引用了属于 http://def.com(CDN) 的 demo.js 文件。
若运行中demo.js的 run()方法 内部报了一个异常，那么前端的错误捕获脚本，只会检测到一个 script error的异常。
这是由于浏览器基于安全考虑故意隐藏了其它域JS文件抛出的具体错误信息。这样可以有效避免敏感信息无意中被第三方(不受控制的)脚本捕获到，因此，浏览器只允许同域下的脚本捕获具体的错误信息。
具体可以参考WEBKIT源码：
bool ScriptExecutionContext::sanitizeScriptError(String& errorMessage, int& lineNumber, String& sourceURL)
{
KURL targetURL = completeURL(sourceURL);
if (securityOrigin()->canRequest(targetURL))
return false;
errorMessage = "Script error.";
sourceURL = String();
lineNumber = 0;
return true;
}
2、如何解决
知道浏览器为什么限制跨域资源引用，解决办法也不困难。在页面请求资源时，让浏览器允许我们发起请求，而服务器（CDN）也允许我们获取资源，从而得到浏览器运行资源的错误信息；这样分两步解决。
第一步：给script标签增加 crossorigin 属性，让浏览器允许页面请求资源。
// 以下两种写法均可
<scrpit src="http://def.com/demo.js" crossorigin></script>
<scrpit src="http://def.com/demo.js" crossorigin="anonymous"></script>
第二步：给静态资源响应头增加允许跨域标记，让服务器允许资源返回。
服务器的HTTP响应头增加 Access-Control-Allow-Origin: * 或者 Access-Control-Allow-Origin: http://def.com
注：大部分主流CDN默认添加了Access-Control-Allow-Origin属性。
3、已添加 crossorigin 依然有 script error
由于部分浏览器对crossorigin属性不支持，又或者我们无法往HTTP请求响应头里面添加跨域属性，因此依然可能产生script error。
这时还可以通过try catch获取页面报错信息，将JS错误重新抛出或者上报。
try {
run(); // 调用demo.js中定义的run方法
} catch (e) {
console.log(e);
throw e;
}
4、参考
5、更多文章分享
6、岳鹰-WEB前端监控
阿里UC出品的 岳鹰全景监控平台，支持移动H5、PC站点、微信小程序以及支付宝小程序等各家小程序，PV、JS异常、页面性能等监控指标完整，已经对外开放，欢迎免费体验试用。
技术交流、第一时间掌握产品动态，欢迎联系微信小助手～
