问题
当第三方脚本报错时因为跨域问题不会暴露详细的错误信息,取而代之的是统一的 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' } }), ...]