使用vue-pdf打包生成***.worker.js，在使用cdn后跨域问题

最近公司做项目中需要使用在线预览pdf，由于使用了vue-pdf，导致在项目打包后会生成一个***.worker.js的文件，因为公司测试线没有使用cnd代理，在测试过程中一切正常。但当项目部署到正式线的时候，这个文件开始保存。报错内容如下：

Error: Failed to resolve async component default: SecurityError: Failed to construct 'Worker': Script at 'https://***.***cdn.com/8e3315feae66f90ee230.worker.js' cannot be accessed from origin 'https://***.***.com'.

image.png

这个初步一看觉得是跨域的问题，就直接跪求运维大哥设置跨域代理，设置完成发现依然没有任何作用，因为cnd使用的是七牛云的，找到客服反馈后客服反馈说，该文件中使用了new Worker，必须与index.html的文件是同源的，即使是设置了跨域代理与无效。
还是自己技术不行了，英文也不行啊，哈哈哈！
最终的解决方案是直接修改该***.worker.js打包时的跨域代理：

步骤一：修改node_modules中的worker-loader/dist/workers/index.js

image.png

将publicPath 改为./

步骤二: 添加依赖patch-package，修改package.json

cnpm i patch-package --save-dev
在package.json中的scripts中添加 "postinstall": "patch-package"

image.png

步骤三：执行命令：npx patch-package worker-loader

执行完成后项目更目录会生成patches的目录，里面有一个补丁文件

image.png

文件中记录修改的内容步骤二与三的功能就是给node_modules打补丁。

步骤四：删除node_modules重新cnpm install，再打包就可以了。

代码提交git后其他人cnpm install后的依赖就是已经修改过的，我们公司使用的阿里云效的自动构建打包，云端构建部署，实测有效。项目运行是可以看到只有这个***.worker.js没有使用代理，功能正常！