微前端架构,子应用需要用到vue-pdf第三方包,但是在实际运行过程中,需要加载vue-pdf的地方会出现报错,提示从主应用请求子应用文件时发生跨域。
报错描述: Failed to construct 'Worker': Script at xxx cannot be accessed from origin xxx。
原因分析: 在尝试注释掉有关vue-pdf的代码后页面恢复正常,可判断为vue-pdf引起。由报错信息可知是web worker在加载子应用文件时,由于和主应用端口号不同被判断为是跨域,禁止跨域访问导致加载失败。
解决方法1: 在用到pdf的子应用 找到vue-pdf源码文件, 对应路径为: node_modules/vue-pdf/src/vuePdfNoSss.vue.,修改PdfjsWorker的引用方式 .利用import引入代替require引入,在编译时就引入该文件,而不是按需载入。
给 worker 设置 inline 属性为 true:
在vue.config.js文件中找到 chainWebpack,在下面加入该段代码即可。
但是改源码 不实际, 本地可以正常显示; 但是测试和正式环境不能显示.
解决方法2: 没有用vue-pdf , 用的是pdf.js
第一步:下载pdf.js (下载地址: Getting Started);
第二步:vue引入 讲下载好的文件放在了根目录的piblic下;
第三步:使用
主要是地址"libs/pdfjs/web/viewer.html?file="+href,
href为请求后端返回的文件路径或者后端返回文件流前段解析后生成的文件路径;
"libs/pdfjs/web/viewer.html"是自己引入pdf.js文件到项目中的路径;
预览方法 : window.open("libs/pdfjs/web/viewer.html?file="+href);
我在项目中用的方法是,使用 iframe嵌入
[ tips: 如果你想要的禁掉pdf文件的下载、打印等功能,最简单的方法是,找的自己导入文件里的viewer.html; 在这个html里找到对应下载的dom直接display:none就可以,切记不可以注掉,注掉会报错。如下,红色框中,一个是下载一个是打印,直接隐藏就可以。]
如果本地可以正常访问, 测试和生产环境不能正常显示, 原因可能是 : nginx解析不了.mjs的文件, 需要在后台配置(leader配置的 我不知道怎么配), 可以正常解析后pdf就可以正常显示了.