在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助。
而使用window.onerror事件来捕获 js脚本中的错误信息是 重要的手段 。
但是对于跨域的资源 ,onerror事件通常会上报 "Script error"
由于这并不是JavaScript的 bug,所以浏览器出于安全考虑,会主动隐藏其他域下js抛出的具体错误信息,但是onerror事件可不管 你这么多,就是直接上报 ,在不做过滤的情况下,你会在 监控平台中看到特别的"Script error"错误日志。
而解决这个问题的一个办法之一就是在跨域资源的script标签中添加crossorigin属性
例如页面域名
my.com
加载了跨域js脚本
<script src="user.com/index.js"></script>
这是在没有添加crossorigin属性的情况下,如果user.com/index.js中抛出了错误,在my.com页面中通过onerror事件是捕获不到具体错误信息的 ,只会捕获到Script error错误
加载了具有crossorigin属性的跨域js脚本
<script src="user.com/index.js" crossorigin ></script>
这样就可以获取到user.com/index.js中的具体错误信息了。
但是crossorigin属性并不是无脑加的!
我们先来看下MDN中对crossorigin的解释:
在HTML5中,一些 HTML 元素提供了对 CORS 的支持, 例如
<audio>
、<img>
、<link>
、<script>
和<video>
均有一个跨域属性 (crossOrigin
property),它允许你配置元素获取数据的 CORS 请求。The
crossorigin
content attribute on media elements is a CORS settings attribute.这些属性是枚举的,并具有以下可能的值:
关键字 描述 anonymous
对此元素的 CORS 请求将不设置凭据标志。 use-credentials
对此元素的CORS请求将设置凭证标志;这意味着请求将提供凭据。 ""
设置一个空的值,如 crossorigin
或crossorigin=""
,和设置anonymous
的效果一样。默认情况下(即未指定 crossOrigin 属性时),CORS 根本不会使用。如 Terminology section of the CORS specification 中的描述,在非同源情况下,设置 "anonymous" 关键字将不会通过 cookies,客户端 SSL 证书或 HTTP 认证交换用户凭据。
即使是无效的关键字和空字符串也会被当作
anonymous
关键字使用。
对于 上边的解释我们注重关注标红的部分。
转换成我们的理解就是:
在html的标签中,有些标签时自带跨域功能的,比如上边提到的audio img link script video 标签,他们的src属性可以是任意源的链接,并且均可以进行加载。
但是如果在标签中添加了anonymous属性,那么浏览器再去解析这些跨域资源的时候,就不会以它的自带跨域功能去加载了,而是 使用CORS的方式加载,就像我们的ajax一样,需要服务器设置跨域头,才可以完成加载,否则会报跨域问题,导致加载失败。
同样的,如果说加载的资源 接入了CND,那么需要源站和CDN节点都需要有此配置,如果没有,该CDN节点的这个资源就是不可用的状态,因为会报跨域问题。