經過fetch方法獲取跨域JS報錯

1、背景

今天在serviceWork中經過fetch獲取一個跨域的JS是報錯了：

難道該JS不支持跨域？ 看下該js的rquest/response：

打眼一看這個js支持跨域啊，但仔細看看發現請求頭裏有個非CORS安全頭部：intervention，而響應頭裏也沒有把intervention加入到access-control-allow-headers裏。

2、是誰在請求頭加的intervention？

正好這個頭裏有連接，點進入看看，原來是chrome本身加的。具體緣由能夠見參考1

3、解決方案

3.1 方案1

不使用document.write了唄，能夠用其餘動態添加JS的方法，如：

var s = document.createElement('script');
s.src = 'xxxxxxx';
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(s, firstScript);

3.2 方案2

在響應頭裏把intervention加入到access-control-allow-headers裏。

參考

1. Intervening against document.write()
2. Intervention: Blocking the load of cross-origin, parser-blocking scripts inserted via document.write for users on 2G
3. 博客報錯 A Parser-blocking, cross-origin script, is invoked via document.write.