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; 
  }