问题
当第三方脚本报错时因为跨域问题不会暴露详细的错误信息,取而代之的是统一的 Script error
我们遇到的情况是 页面
和js
的二级域名一样,并且设置了document.domain
,chrome 浏览器能够展示详细错误栈;但是很多手机浏览器依然是Script error
。
解法
我们使用的 cdn 是阿里云,实际上他已经给出了此问题的解法
阅读之后我们知道只要给 script 标签添加 crossorigin 属性就可以了,之后效果如图
具体方法
我们项目使用的是 webpack
,对 html 进行修饰的插件大家用的应该都是html-webpack-plugin
,此插件的衍生插件script-ext-html-webpack-plugin
能够满足我们的需求。
plugins: [
....
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtmlProd,
}),
new ScriptExtHtmlWebpackPlugin({
custom: {
test: /\.js$/,
attribute: 'crossorigin',
value: 'anonymous'
}
}),
...
]