Script Error. 错误产生的原因与解决方案详解

文
章
目
录

• 一、“Script Error.”错误
• 二、“Script Error.”错误背后的原因剖析
• 三、应对“Script Error.”错误的有效方法
• （一）给外链脚本设置crossorigin属性
• （二）异步加载脚本也要注意
• （三）Safari浏览器的特殊情况

在前端开发过程中，“Script Error.”错误是个让人头疼的问题，今天就来和大家详细聊聊这个错误是怎么回事，又该如何解决。这篇文章会把复杂的技术原理用简单的话讲清楚，还会给出实用的解决方案。

一、“Script Error.”错误

在前端开发时，不少人都遇到过“Script Error.”这个错误提示。它就像个谜题，因为报错信息很不完整，也没有详细的错误堆栈，这让开发者在排查问题时感觉无从下手，不知道错误究竟出在哪里。比如说，页面突然某个功能无法正常使用，查看控制台只看到“Script Error.”，根本没办法快速定位是哪段代码出了问题，严重影响开发效率。

二、“Script Error.”错误背后的原因剖析

出现“Script Error.”错误，主要是因为报错的JavaScript脚本是来自其他域名的外链脚本。从浏览器的角度来看，这样做其实是为了保护用户的安全和隐私。想象一下，如果我们在自己的网页上引用了第三方的脚本，万一这个脚本有恶意代码，它可能会获取到用户的敏感信息。

为了防止这种情况发生，浏览器会故意隐藏其他域的JS文件抛出的具体错误信息，只告诉我们发生了错误，但不透露错误的具体内容。这就好比给敏感信息上了一把锁，只有同域下的脚本才有“钥匙”，能获取到具体的错误信息，其他脚本只能知道出错了。要是你想深入了解，可以去查看Webkit的源码，里面有更详细的解释。

三、应对“Script Error.”错误的有效方法

（一）给外链脚本设置crossorigin属性

解决这个问题的一个有效办法，就是给所有外链的script脚本都设置crossorigin=\"anonymous\"这个属性。看下面这段代码：

<!-- 给外链脚本设置crossorigin=\"anonymous\"属性，让异常能被监控脚本捕获 -->
<script src=\'baidu.com\' crossorigin=\'anonymous\'></script>

加上这个属性之后，当引用的脚本抛出异常时，监控脚本就能捕获到具体的错误信息了，这样我们就能更方便地排查问题。

（二）异步加载脚本也要注意

现在很多项目会用到动态模块加载，像React.lazy或者动态import这些技术。在这种情况下，异步加载的js脚本同样需要加上crossorigin=\"anonymous\"。以webpack为例，我们需要配置output.crossOriginLoading=\'anonymous\'，具体的配置方法可以参考webpack.js.org/configurati… 。这样配置之后，异步加载的脚本在出现错误时，也能提供更详细的报错信息。

（三）Safari浏览器的特殊情况

不过，即使我们按照上面的方法做了，在Safari等部分浏览器上，还是可能会出现一些“Script error.”错误。这是因为这些浏览器对crossorigin属性的支持不太完善。目前针对这种情况，暂时还没有完美的解决办法。就拿手机钉钉打开页面来说，如果出现脚本错误，就只能显示“Script error.”，我们很难获取到更详细的错误信息。要是你想了解更多相关讨论，可以去sentry.io/answers/scr… 看看，这里面有不少开发者分享的经验和讨论。

前端开发中遇到的“Script Error.”错误虽然麻烦，但通过上面这些方法，大部分情况下还是能有效解决的。希望大家在开发过程中遇到这个问题时，不再感到困惑，能够顺利解决问题，提高开发效率。要是你还有其他关于前端开发的问题，欢迎一起交流讨论！