devServer限制导致不能用线上主应用调试本地子应用

[ystyle]

What happens?

按正常部署一套qiankun的微前端, 然后需要调试时使用线上主应用调试本地应用.

Mini Showcase Repository(REQUIRED)

因为k8s环境复杂,这里不太好弄仓库. 我描述一下环境.

1. 主应用和子应用是两个workload. 同一个域名从ingress 不同路径到两个微前端应用
2. 子应用加载使用route和umi的public path不同的方式加载
3. 前端域名已启用https, 现在整个网站是跑在微前端上的. 正确使用.
4. 需要在本地调试子应用时, 有两个方法把线上流量转发到本地.
5. 这里说第一个转发的方法为例: 在本地启动一个子应用的开发服务. 端口为方便调整和线上服务一致 (另一个方法是用frp把本地应用公开, 用ExternalName的方式创建service之后为第8步改ingress)
6. 安装[kt connnect](https://github.com/alibaba/kt-connect) , 然后将本地运行的服务实例注册到集群上, 用kt connect执行 ktctl preview qiankun-app1-preview --expose 8080 (以qiankun-app1-preview 子应用为例)
7. 把ingress 微前端子应用的的配置调访问qiankun-app1-preview
8. 现在访问主应用, 点访问期其子应用的路径, 控制台会报错, 如上图,
   1. 都是devServer报的: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS
   2. 部分devServer的连接拼的是错误的(主应用是线上的, 它拼的连接是访问主应用的devServer, 而线上主应用并没有devServer)

How To Reproduce

Steps to reproduce the behavior: 1. 2. 详情过和如上面所描述

Expected behavior 1. 2. 能正常使用线上主应用调试本地子应用

Context

• qiankun Version: 2.36.0, 使用的umi插"umi": "^3.5.20"
• Platform Version: linux / windiows / macos
• Browser Version: chrome 97.0.4692.99

[gongshun]

同一个问题 https://github.com/umijs/qiankun/issues/2150

[Relaxe111]

this very problem i solved by specifying that dev server need to use ws not wss for hmr connections. In vite, is pretty simple i just added server.hmr.protocol = 'ws' :

//vite.config.ts

...


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        // useDevMode = true 时不开启热更新
        //react(),
        qiankunPlugin({
            useDevMode,
        }),
        react(),
        svgr(),
       
        viteCompression(),
    ],
  
    base: process.env.BASE_URL,
    server: {
        hmr: {
            protocol: 'ws',
        },
   
    },
})

I guess something similar is possible in other frameworks as well But still changes not applies on page.

[Fidelgithub]

umi环境参考：https://github.com/umijs/umi/issues/8303 报iframeReady错误时可在主应用手动加上

window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ =
                  window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ || {}