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、參考

• Cross-Origin Resource Sharing (CORS)
• The crossorigin attribute: Requesting CORS access to content

5、更多文章分享

• 阿里UC百億級PV的前端監控平臺實踐 https://zhuanlan.zhihu.com/p/79978987
• 10分鐘徹底搞懂前端頁面性能監控 https://zhuanlan.zhihu.com/p/82981365

6、岳鷹-WEB前端監控

阿里UC出品的岳鷹WEB前端監控，支持移動H5、PC站點、微信小程序以及支付寶小程序等各家小程序，PV、JS異常、頁面性能等監控指標完整，已經對外開放，歡迎免費體驗試用。

技術交流、第一時間掌握產品動態，歡迎聯系微信小助手～

微信號 effirst-assistant

總結

以上是生活随笔為你收集整理的前端demo_【前端3分钟】Script Error产生的原因和解法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。