问题
监控代码如下:
window.addEventListener('error', e => {
if (linkNet) return;
// const target = e.target;
e.stopImmediatePropagation();
const target = e.srcElement ? e.srcElement : e.targe
//收集错误信息
let errorMsg = {
project: target.localName ? `教师端-${target.localName}` : '', // 错源名称。比如图片这里就是'img'
time: Date.now(),
userID: user?.uuid || '未登录',
msg: e.message || target.baseURI,
// 直接上报
if (process.env.REACT_APP_ENV === 'development') return;
pushError(errorMsg);
}, true
最近项目在国外用户登录,经常会报Script error的错误, 国内却没发现此问题。
原因: 这是由于浏览器基于安全考虑故意隐藏了其它域JS文件抛出的具体错误信息。这样可以有效避免敏感信息无意中被第三方(不受控制的)脚本捕获到,因此,浏览器只允许同域下的脚本捕获具体的错误信息。
解决办法
-
给script标签增加 crossorigin 属性,让浏览器允许页面请求资源。
-
给静态资源响应头增加允许跨域标记,让服务器允许资源返回。
服务器的HTTP响应头增加 Access-Control-Allow-Origin: * 或者 Access-Control-Allow-Origin: def.com
我的问题
本人项目中问题主要是引入了阿里云图库Symbol,解决方法暂时只能把图标下载到本地,不用Symbol导入图标库。
当网站请求并执行一个托管在第三方域名下的脚本时,就可能遇到该错误。最常见的情形是使用CDN托管JS资源。