script标签中的crossorigin属性

在前端监控逐渐完善的今天，页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助。

而使用 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 请求。

这些属性是枚举的，并具有以下可能的值：

关键字	描述
anonymous	对此元素的 CORS 请求将不设置凭据标志。
use-credentials	对此元素的CORS请求将设置凭证标志；这意味着请求将提供凭据。
""	设置一个空的值，如 crossorigin 或 crossorigin=""，和设置 anonymous 的效果一样。

默认情况下（即未指定 crossOrigin 属性时），CORS 根本不会使用。在非同源情况下，设置 "anonymous" 关键字将不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。

即使是无效的关键字和空字符串也会被当作 anonymous 关键字使用。