micro-app icon indicating copy to clipboard operation
micro-app copied to clipboard

能否像qiankun一样添加一个属性excludeAssetFilter指定部分特殊的动态加载的微应用资源(css/js) 不被microApp 劫持处理

Open huchaolin opened this issue 2 years ago • 5 comments

功能描述

如题, 微前端框架qiankun的(文档地址)配置项中有一个字段为excludeAssetFilter - (assetUrl: string) => boolean - 可选,指定部分特殊的动态加载的微应用资源(css/js) 不被 qiankun 劫持处理

问: microApp是否也能提供类似excludeAssetFilter的配置字段,用于避免在 微应用加载第三方静态资源时,静态资源中有动态的通过创建script或link来动态加载css/js资源以避免跨域问题的这种场景被基座劫持为fetch请求从而触发跨域问题导致加载失败, 同时也需要保证避免劫持之后微应用中通过script或者link方式能正常加载到资源

huchaolin avatar Aug 10 '22 02:08 huchaolin

在元素上设置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

bailicangdu avatar Aug 10 '22 03:08 bailicangdu

后续会增加类似qiankun的配置,从基座角度实现过滤

bailicangdu avatar Aug 10 '22 03:08 bailicangdu

在元素上设置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的方式正常加载啊。。。

huchaolin avatar Aug 10 '22 03:08 huchaolin

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

bailicangdu avatar Aug 10 '22 03:08 bailicangdu

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标签去请求资源的时候被劫持的情况, 这是一个加载第三方资源很常见的场景啊

huchaolin avatar Aug 10 '22 04:08 huchaolin

引入谷歌地图的时候也遇到了类似的同样的问题,动态创建的 jsonp 被劫持导致跨域报错。。。

OldDream avatar Aug 19 '22 06:08 OldDream

引入谷歌地图的时候也遇到了类似的同样的问题,动态创建的 jsonp 被劫持导致跨域报错。。。

嘿!在插件里配置了下面这些配置,googlemap正常加载了!

plugins: {
        global: [
            {
                escapeProperties: ['__googleMapsCallback'],
                ignoreChecker: url => {
                    console.log('ignoreChecker:', url);
                    if (url.includes('googleapis')) {
                        console.log('不经过fetch!');
                        return true;
                    }
                    return false;
                }
            }
        ]
    }

OldDream avatar Aug 19 '22 08:08 OldDream

最新版本已支持excludeAssetFilter,使用方式

import microApp from '@micro-zoe/micro-app'

microApp.start({
  excludeAssetFilter (assetUrl) {
    if (assetUrl === 'xxx') {
      return true // 返回true则micro-app不会劫持处理当前文件
    }
    return false
  }
})

bailicangdu avatar Aug 19 '22 12:08 bailicangdu

最新版本已支持excludeAssetFilter,使用方式

import microApp from '@micro-zoe/micro-app'

microApp.start({
  excludeAssetFilter (assetUrl) {
    if (assetUrl === 'xxx') {
      return true // 返回true则micro-app不会劫持处理当前文件
    }
    return false
  }
})

@bailicangdu 请更新你们的文档关于此 api 的用法,谢谢!

CaptainOfPhB avatar Sep 05 '22 12:09 CaptainOfPhB

貌似没有用,救救孩子,现在一用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

image

bailicangdu avatar Nov 01 '22 12:11 bailicangdu

最新版本已支持excludeAssetFilter,使用方式

import microApp from '@micro-zoe/micro-app'

microApp.start({
  excludeAssetFilter (assetUrl) {
    if (assetUrl === 'xxx') {
      return true // 返回true则micro-app不会劫持处理当前文件
    }
    return false
  }
})

貌似没气作用,还是会被劫持哦,现在一用jsonp就会报错,无法找到定义的callback函数

Minsaint avatar Nov 01 '22 12:11 Minsaint

我当前更新到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 avatar Mar 27 '23 08:03 JackySoft

@JackySoft excludeAssetFilter目前只能处理动态创建的script,如果你是在html中引入的script,不会触发excludeAssetFilter

bailicangdu avatar Mar 27 '23 08:03 bailicangdu

@JackySoft excludeAssetFilter目前只能处理动态创建的script,如果你是在html中引入的script,不会触发excludeAssetFilter

明白了

JackySoft avatar Mar 27 '23 08:03 JackySoft

最新版本已支持excludeAssetFilter,使用方式

import microApp from '@micro-zoe/micro-app'

microApp.start({
  excludeAssetFilter (assetUrl) {
    if (assetUrl === 'xxx') {
      return true // 返回true则micro-app不会劫持处理当前文件
    }
    return false
  }
})

用这种方法首次加载子应用的时候没问题,子应用卸载之后再次加载还是出现问题了。 image 我这边是排除了Cesium相关的文件,子应用卸载后再次加载报错,跟没有排除的报错是一样的。 image 可以帮忙看看什么原因吗

yang1191681949 avatar Dec 19 '23 10:12 yang1191681949

image 配置了excludeAssetFilter之后,会报跨域,请问下有解决方案吗?

Jennylx avatar Dec 24 '23 03:12 Jennylx

image 配置了excludeAssetFilter之后,会报跨域,请问下有解决方案吗? 我也遇到一样的问题了,怎么解决的

small-wolf-dog avatar Feb 27 '24 08:02 small-wolf-dog

image 配置了excludeAssetFilter之后,会报跨域,请问下有解决方案吗? 我也遇到一样的问题了,怎么解决的

如果是本地的资源,感觉需要做一个反代了。。

OldDream avatar Feb 27 '24 09:02 OldDream