微前端子应用加载 vue-pdf 时跨域问题解决
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
项目场景:
微前端架构,子应用需要用到vue-pdf第三方包,但是在实际运行过程中,需要加载vue-pdf的地方会出现报错,提示从主应用请求子应用文件时发生跨域。
问题描述
子应用在加载vue-pdf的时候遇到跨域报错: Failed to construct ‘Worker’: Script at xxx cannot be accessed from origin xxx。
原因分析:
在尝试注释掉有关vue-pdf的代码后页面恢复正常,可判断为vue-pdf引起。由报错信息可知是web worker在加载子应用文件时,由于和主应用端口号不同被判断为是跨域,禁止跨域访问导致加载失败。
解决步骤:
- 修改vue-pdf源码文件,对应路径为: node_modules/vue-pdf/src/vuePdfNoSss.vue.,接下来修改PdfjsWorker的引用方式,如图利用import引入代替require引入,在编译时就引入该文件,而不是按需载入。
<style src="./annotationLayer.css"></style>
<script>
import componentFactory from './componentFactory.js'
import PdfjsWorker from 'pdfjs-dist/es5/build/pdf.worker.js'//修改这
if ( process.env.VUE_ENV !== 'server' ) {
var pdfjsWrapper = require('./pdfjsWrapper.js').default;
var PDFJS = require('pdfjs-dist/es5/build/pdf.js');
if ( typeof window !== 'undefined' && 'Worker' in window && navigator.appVersion.indexOf('MSIE 10') === -1 ) {
// var PdfjsWorker = require('worker-loader!pdfjs-dist/es5/build/pdf.worker.js');//注释这
PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
}
var component = componentFactory(pdfjsWrapper(PDFJS));
} else {
var component = componentFactory({});
}
export default component;
</script>
- 给 worker 设置 inline 属性为 true:
在vue.config.js文件中找到 chainWebpack,在下面加入该段代码即可。
vue.config.js
chainWebpack: (config) => {
config.resolve.alias
.set("@", resolve("src")) // key,value自行定义,比如.set('@@', resolve('src/components'))
.set("_c", resolve("src/components"));
// 加上这
config.module
.rule("worker")
.test(/\.worker\.js$/)
.use("worker-loader")
.loader("worker-loader")
.options({
inline: true,
fallback: false,
})
.end();
},
此时刷新页面,页面正常加载,问题解决~~
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)