部署时的问题
1、子应用生产环境下,主应用请求子应用会产生跨域错误。

2、主应用请求子应用的资源时是qiankun框架内自带的fetch方法,使用https访问页面时,fetch方法还是会发送http请求导致(blocked:mixed-content)错误。

3、一个服务器可能会部署多个子应用,所以需要区分不同的子应用,以便nginx能代理到正确的子应用服务。

解决办法

1、子应用nuxt.config.js中加入。

build: {
 publicPath: process.env.NODE_ENV === ‘production’ ? assets-path : ‘’,
},
为了便于维护及后续的处理,这里推荐统一格式{xxxx-path}

2、主应用中启动配置沙箱时加入自定义的fetch方法。

const portHash = {
 10001: ‘system-child’,
}
start({
 sandbox: {
   experimentalStyleIsolation: true,
},
 async fetch(url, …args) {
   if (window.location.protocol === ‘https:’ && url.includes(‘http://‘)) {
     /**
    const points = url.split(‘:’)[2]
    const port = points.substr(0, 5)
    const prefix = portHash[port]
    let newUrl = ‘’
    if (points.length > 7) {
      const suffix = points.substr(6)
      newUrl = https://${window.location.host}/${suffix}
    } else {
      newUrl = https://${window.location.host}/${prefix}/
    }
    **/
     // 以上过程为将http的请求路径进行拼接,同时加入后缀区分每一个子应用用于nginx做代理,具体逻辑可自己实现。
     return window.fetch(newUrl, …args)
  }
   return window.fetch(url, …args)
}
})
为了便于维护及后续的处理,这里子应用的后缀推荐统一格式{xxxx-child}

3、ngnix代理。

location /system-child {
   add_header ‘Access-Control-Allow-Origin’ ‘‘;
   proxy_pass http://127.0.0.1:10001/;
}

location /system-path {
   add_header ‘Access-Control-Allow-Origin’ ‘
‘;
   proxy_pass http://127.0.0.1:10001/system-path/;
}
对前面子应用添加的前缀进行代理转发。