admin管理员组文章数量:1516870
背景
在 script 标签中加载托管到第三方 cdn 上的资源的时候，可能会出现 script error. 的报错。由于该错误不提供完整的报错信息（错误堆栈），问题的排查往往无从下手。
script error. 生成的原因
这个错误也叫做“跨域错误”，一般情况会发生在 script 标签中加载托管到第三方 cdn 上的资源的时候，常用的场景是在 cdn 上托管 js资源。
方便大家理解，假设下面 html 页面部署在 （可以在 vscode 使用 live server 生成）域名下：
<!doctypehtml><html><head><title>Test page in </title></head><body><scriptsrc=""></script><script>
window.onerror=function(message, url, line, column, error){
console.log(message, url, line, column, error);}foo();</script></body></html>假设 foo 方法里面调用了一个未定义的 bar 方法
functionfoo(){bar();// ReferenceError: bar is not a function}运行页面之后，捕获到的异常如下
Script error. 0 0 null
其实这边并不是 JavaScript 的一个 bug，这是浏览器安全策略的一个表现，浏览器会刻意隐藏其他域的 js 资源抛出的错误，这样可以有效避免敏感信息无意中被不可控的第三方脚本捕获。因此，浏览器只允许同域下的脚本捕获到具体的错误信息，而其他脚本只知道发生了错误，但是不知道错误的具体细节。
解决方式
解法一：开启跨域资源共享 CORS
为捕获跨域 JavaScript 的错误，可以执行以下两个步骤
- 步骤 1：添加 crossorigin="anonymous 属性
<script src="" crossorigin="anonymous"></script>此步骤的作用是告知浏览器以匿名的方式获取目标脚本。也就是请求资源的时候不会向服务器发送潜在的用户身份信息（cookie，HTTP 证书等）
- 添加跨域 HTTP 请求头
Access-Control-Allow-Origin: *
// 或者
Access-Control-Allow-Origin:
说明：大部分主流CDN默认添加了Access-Control-Allow-Origin属性。以下是 jsdelivr 的示例：
完成上述两个步骤之后，就可以通过 window.onerror 捕获跨域 js 文件的错误了。回到前面的案例，重新运行页面之后，捕获到的结果是:
Uncaught ReferenceError: bar is not defined, 2, 3, ReferenceError: bar is not defined
解法二（可选）：使用 try catch
如果难以在 HTTP 请求头中添加跨域属性，可以使用 try catch 的方式
之前的案例，添加 try catch
<!doctypehtml><html><head><title>Test page in </title></head><body><scriptsrc=""></script><script>
window.onerror=function(message, url, line, column, error){
console.log(message, url, line, column, error);}try{foo();// 调用app.js中定义的foo方法}catch(e){
console.log(e);throw e;// 重新抛出错误以触发全局window.onerror}</script></body></html>
运行页面之后，捕获到的结果是:
可见，try catch 中的 log 语句捕获到了“完整”的报错信息，window.onerror 也可以捕获完整的信息。尽管这种方式也可以捕获完整的信息，但推荐采用解法 1。
留个疑问
错误代码最终是来自跨域的 js 文件，那么有人知道，window.onerror里面，ur l参数，为什么不是打印 呢？
版权声明：本文标题：从"Script Error"到流畅播放：解决Flash中心的技术攻略 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1771342338a3264426.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论