admin管理员组文章数量:1516870
本文首发于知乎 ，搬运转载请注明出处，否则追究版权责任。
Script Error对于前端开发者相信都不陌生，由于没有具体错误堆栈和代码行列号，成为可能是最神秘的错误之一。
下面介绍Script Error产生的原理和解决办法。
1、Script Error是如何产生的
跨域资源引用
假如：
abc.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="" crossorigin></script>
<scrpit src="" crossorigin="anonymous"></script>
第二步：给静态资源响应头增加允许跨域标记，让服务器允许资源返回。
服务器的HTTP响应头增加
Access-Control-Allow-Origin: *
或者
Access-Control-Allow-Origin:
注：大部分主流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异常、页面性能等监控指标完整，已经对外开放，欢迎免费体验试用。
技术交流、第一时间掌握产品动态，欢迎联系微信小助手～
本篇文章由一文多发平台
自动发布
版权声明：本文标题：Flash中心的麻烦：Script Error如何出现，怎样轻松解决？ 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/biancheng/1771342644a3264430.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论