Web Worker 跨域访问

    Web Worker按照字面意思应该翻译成“工作者线程”，这个API有点类似MFC里的线程函数，MFC的线程函数也分普通线程(完整的线程功能，拥有消息循环功能)与工作者线程(没有消息循环，就是拿来做后台处理数据的线程用的)。这个东西也很讨厌的需要符合WEB的同域安全策略，也就是在https://www.baidu.com/里想这样创建一个工作者线程：

var myWorker = new Worker('http://localhost/haha.js');

    但这样是不行的，浏览器会报错：

Uncaught DOMException: Failed to construct 'Worker': Script at 'http://localhost/haha.js' cannot be accessed from origin 'https://www.baidu.com'.

 

    说穿了就是被同域才能访问的安全策略给限制了。但有时候存放js文件的托管平台或者我们自己的服务器与要创建工作线程的页面就是不在一个域名下，那要怎么办？

    浏览器不允许使用指向不同域的URL创建Worker。但是它允许创建一个BLOB URL，该URL可用于初始化Worker。

    可以通过以下方式创建blob：

    Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。

 

创建工作线程的页面中的JS代码：

 

var blob = new Blob(['importScripts("http://localhost/haha.js")'], {"type": 'application/javascript'});

var blobUrl = window.URL.createObjectURL(blob);

let loonin=new Worker(blobUrl);

loonin.postMessage("春哥纯爷们，");


loonin.onmessage=(e)=>{

    console.log(e.data);

};

haha.js文件中的内容：

onmessage = (e) => {

    console.log("我是工作线程里的春哥");

    postMessage(e.data + "铁血真汉子！");


};

这样就绕开了同源策略的限制。感谢参考资料这位大神的博客。

参考资料：https://blog.csdn.net/qq_43758883/article/details/104169108

本文地址：https://blog.csdn.net/l198738655/article/details/107299983