本文首發於知乎【前端3分鍾】Script Error產生的原因和解法，搬運轉載請注明出處，否則追究版權責任。
Script Error對於前端開發者相信都不陌生，由於沒有具體錯誤堆棧和代碼行列號，成為可能是最神秘的錯誤之一。
下面介紹Script Error產生的原理和解決辦法。
1、Script Error是如何產生的
跨域資源引用
假如：abc.com 下的頁面引用了屬於 http://def.com(CDN) 的 demo.js 文件。 若運行中demo.js的 run()方法 內部報了一個異常，那么前端的錯誤捕獲腳本，只會檢測到一個 script error的異常。
這是由於瀏覽器基於安全考慮故意隱藏了其它域JS文件拋出的具體錯誤信息。這樣可以有效避免敏感信息無意中被第三方(不受控制的)腳本捕獲到，因此，瀏覽器只允許同域下的腳本捕獲具體的錯誤信息。具體可以查看《瀏覽器同源策略以及Script Error錯誤》。
具體可以參考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異常、頁面性能等監控指標完整，已經對外開放，歡迎免費體驗試用。
技術交流、第一時間掌握產品動態，歡迎聯系微信小助手～
