相同二級域名 Script error 問題解法

問題

當第三方腳本報錯時由於跨域問題不會暴露詳細的錯誤信息，取而代之的是統一的 Script error

咱們遇到的狀況是頁面和js的二級域名同樣

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

而且設置了document.domain = 'test.com';，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'
    }
  }),
  ...
]