使用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'.
这个初步一看觉得是跨域的问题,就直接跪求运维大哥设置跨域代理,设置完成发现依然没有任何作用,因为cnd使用的是七牛云的,找到客服反馈后客服反馈说,该文件中使用了new Worker,必须与index.html的文件是同源的,即使是设置了跨域代理与无效。
还是自己技术不行了,英文也不行啊,哈哈哈!
最终的解决方案是直接修改该***.worker.js打包时的跨域代理:
步骤一:修改node_modules中的worker-loader/dist/workers/index.js
将publicPath 改为./
步骤二: 添加依赖patch-package,修改package.json
cnpm i patch-package --save-dev
在package.json中的scripts中添加 "postinstall": "patch-package"
步骤三:执行命令:npx patch-package worker-loader
执行完成后项目更目录会生成patches的目录,里面有一个补丁文件
文件中记录修改的内容步骤二与三的功能就是给node_modules打补丁。
步骤四:删除node_modules重新cnpm install,再打包就可以了。
代码提交git后其他人cnpm install后的依赖就是已经修改过的,我们公司使用的阿里云效的自动构建打包,云端构建部署,实测有效。项目运行是可以看到只有这个***.worker.js没有使用代理,功能正常!