微前端访问子应用跨域问题
部署时的问题
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/;
}
对前面子应用添加的前缀进行代理转发。