前言

在wujie、qiankun等微前端框架使用Worker文件出现了跨域问题，下面是我摸索出的解决方案

跨域的原因

在使用微前端框架时，本质是一个基座项目根据不同状态的加载不同的子项目

未命名文件 (1)

访问127.0.0.1:8001/a地址时，基座加载A项目的页面数据，然后显示到基座项目，B项目的加载也是如此

这里需要注意基座、A项目、B项目启动的端口不一致，基座去请求这些子项目时，一定会发生跨域

以qiankun为例，在使用过程中就需要允许子项目被跨域请求资源

这个配置能解决除 Worker文件以外的所有资源文件跨域问题

Worker文件特性就决定的了A项目、B项目中的Worker文件不能被基座项目直接加载

想了解更详细的worker知识，可以参考阮一峰的文档

解决方案

绝对路径

这个解决办法是最简单的，只需要把子项目的Worker文件 复制一份到基座项目中就可以了

注意：子项目的webapck打包会改变Worker文件的路径，为了方便基座项目加载Worker文件，这里需要把子项目中的Worker文件的使用地址改为绝对路径，这样就不会被webpack打包了

改变子项目 Worker文件的引入路径

const transWorker = new Worker("/test.worker.js");

复制worker.js文件到public目录中，这里子项目和基座项目都要复制一份

嵌入打包

Worker文件不能跨域加载，那么可以把Worker文件的内容转为Blob格式数据，再通过window.URL.createObjectURL转为同源文件地址就可以了

var blob = new Blob(['importScripts("127.0.0.1:8002/test.worker.js")'], {
  "type": 'application/javascript'
});

var blobUrl = window.URL.createObjectURL(blob);
var worker = new Worker(blobUrl);

worker-loader（推荐）

适用范围：webpack4、webpack5

安装loader
```
npm install -D worker-loader
```
配置loader

configureWebpack: config => {
    config.module.rules.push({
        test: /\.worker.js$/,
        use: {
            loader: 'worker-loader',
            options: { 
                filename: 'WorkerName.[contenthash].js',
                inline:true // 修改inline配置
            }   
        }
    })
}

编写worker文件，文件名称以worker.js结尾

// test.worker.js

self.addEventListener('message', (event) => {
    console.log(event.data);
})

// index.js
import Worker from './test.worker.js';
var worker = new Worker(); 
worker.postMessage("我是app.js的数据");

这里的原理inline配置选项和上面嵌入打包是一样的

原理参考文章

参考文档

Web Worker 跨域访问

Web Workers 资源跨域问题

【记一忘三二】微前端框架Worker文件跨域问题

前言