micro-app
micro-app copied to clipboard
能否像qiankun一样添加一个属性excludeAssetFilter指定部分特殊的动态加载的微应用资源(css/js) 不被microApp 劫持处理
功能描述
如题, 微前端框架qiankun的(文档地址)配置项中有一个字段为excludeAssetFilter - (assetUrl: string) => boolean - 可选,指定部分特殊的动态加载的微应用资源(css/js) 不被 qiankun 劫持处理
问: microApp是否也能提供类似excludeAssetFilter
的配置字段,用于避免在 微应用加载第三方静态资源时,静态资源中有动态的通过创建script或link来动态加载css/js资源以避免跨域问题的这种场景
被基座劫持为fetch请求从而触发跨域问题导致加载失败, 同时也需要保证避免劫持之后微应用中通过script或者link方式能正常加载到资源
在元素上设置exclude属性可以实现过滤效果 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/configure?id=exclude%e8%bf%87%e6%bb%a4%e5%85%83%e7%b4%a0
后续会增加类似qiankun的配置,从基座角度实现过滤
在元素上设置exclude属性可以实现过滤效果 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/configure?id=exclude%e8%bf%87%e6%bb%a4%e5%85%83%e7%b4%a0
加上exclude之后 基座访问微应用时, 这个资源就会被删除啊, 这个并不是excludeAssetFilter字段的作用啊,excludeAssetFilter的作用是跳过对资源的劫持并保证它在微应用中能以script或link的方式正常加载啊。。。
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/configure?id=ignore%e5%bf%bd%e7%95%a5%e5%85%83%e7%b4%a0
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/configure?id=ignore%e5%bf%bd%e7%95%a5%e5%85%83%e7%b4%a0
那我是不是可以理解为ignore设计缺陷,因为ignore 只是解决了 标记了ignore的script标签会被避免劫持, 但是没解决该script标签加载的内容中有动态创建script标签去请求资源的时候被劫持的情况, 这是一个加载第三方资源很常见的场景啊
引入谷歌地图的时候也遇到了类似的同样的问题,动态创建的 jsonp 被劫持导致跨域报错。。。
引入谷歌地图的时候也遇到了类似的同样的问题,动态创建的 jsonp 被劫持导致跨域报错。。。
嘿!在插件里配置了下面这些配置,googlemap正常加载了!
plugins: {
global: [
{
escapeProperties: ['__googleMapsCallback'],
ignoreChecker: url => {
console.log('ignoreChecker:', url);
if (url.includes('googleapis')) {
console.log('不经过fetch!');
return true;
}
return false;
}
}
]
}
最新版本已支持excludeAssetFilter,使用方式
import microApp from '@micro-zoe/micro-app'
microApp.start({
excludeAssetFilter (assetUrl) {
if (assetUrl === 'xxx') {
return true // 返回true则micro-app不会劫持处理当前文件
}
return false
}
})
最新版本已支持excludeAssetFilter,使用方式
import microApp from '@micro-zoe/micro-app' microApp.start({ excludeAssetFilter (assetUrl) { if (assetUrl === 'xxx') { return true // 返回true则micro-app不会劫持处理当前文件 } return false } })
@bailicangdu 请更新你们的文档关于此 api 的用法,谢谢!
貌似没有用,救救孩子,现在一用jsonp就会报错,jsonp加载完以后回调无法的函数名获取不到导致报错undefined
试试这个呢 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/configure?id=ignore%e5%bf%bd%e7%95%a5%e5%85%83%e7%b4%a0

最新版本已支持excludeAssetFilter,使用方式
import microApp from '@micro-zoe/micro-app' microApp.start({ excludeAssetFilter (assetUrl) { if (assetUrl === 'xxx') { return true // 返回true则micro-app不会劫持处理当前文件 } return false } })
貌似没气作用,还是会被劫持哦,现在一用jsonp就会报错,无法找到定义的callback函数
我当前更新到0.8.10,测试该属性未生效,发现assetUrl压根没有找到百度的地图URL。代码如下:
excludeAssetFilter(assetUrl) { console.log('assetUrl', assetUrl); if (assetUrl.indexOf('.baidu.com') > -1) { return true; // 返回true则micro-app不会劫持处理当前文件 } return false; },
经过日志打印,assetUrl 并没有百度地图url(https://api.map.baidu.com/getscript?v=3.0&ak=xxx&services=&t=20230105101157),
@JackySoft excludeAssetFilter目前只能处理动态创建的script,如果你是在html中引入的script,不会触发excludeAssetFilter
@JackySoft excludeAssetFilter目前只能处理动态创建的script,如果你是在html中引入的script,不会触发excludeAssetFilter
明白了
最新版本已支持excludeAssetFilter,使用方式
import microApp from '@micro-zoe/micro-app' microApp.start({ excludeAssetFilter (assetUrl) { if (assetUrl === 'xxx') { return true // 返回true则micro-app不会劫持处理当前文件 } return false } })
用这种方法首次加载子应用的时候没问题,子应用卸载之后再次加载还是出现问题了。
我这边是排除了Cesium相关的文件,子应用卸载后再次加载报错,跟没有排除的报错是一样的。
可以帮忙看看什么原因吗
配置了excludeAssetFilter之后,会报跨域,请问下有解决方案吗?
配置了excludeAssetFilter之后,会报跨域,请问下有解决方案吗? 我也遇到一样的问题了,怎么解决的
配置了excludeAssetFilter之后,会报跨域,请问下有解决方案吗? 我也遇到一样的问题了,怎么解决的
如果是本地的资源,感觉需要做一个反代了。。