相同二级域名 Script error 问题解法

问题

当第三方脚本报错时由于跨域问题不会暴露详细的错误信息,取而代之的是统一的 Script errorhtml

image

咱们遇到的状况是页面js的二级域名同样webpack

页面:https://a.test.com/index
js:https://b.test.com/bundle.js

而且设置了document.domain = 'test.com';,chrome浏览器可以展现详细错误栈;可是不少手机浏览器依然是Script errorweb

解法

咱们使用的cdn是阿里云,实际上他已经给出了此问题的解法chrome

阅读以后咱们知道只要给script标签添加crossorigin属性就能够了,以后效果如图segmentfault

image

具体方法

咱们项目使用的是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'
    }
  }),
  ...
]
相关文章
相关标签/搜索