通过fetch方法获取跨域JS报错

一、背景

今天在serviceWork中通过fetch获取一个跨域的JS是报错了：

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

打眼一看这个js支持跨域啊，但仔细看看发现请求头里有个非CORS安全头部：intervention，而响应头里也没有把intervention加入到access-control-allow-headers里。

二、是谁在请求头加的intervention？

正好这个头里有链接，点进入看看，原来是chrome自己加的。具体原因可以见参考1

三、解决方案

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.