首次加载失败,刷新就正常了。
公司内网配置了深信服的网管系统。
在这环境下访问我们页面时,出现了以下问题:
qiankuan加载子系统时,会有较大概率出现混入了一个 cookie/flash.js的文件,然后出现加载错误。
插入的链接:http://10.1.1.99:89/cookie/flash.js
qiankun去fetch该链接时,出现了跨域错误,加载失败,结果就导致整个子系统加载中断了。
将子应用的 HTML 的 response content-type 改为 text/plain(终极方案)
原理是运营商只能识别 response content-type 为 text/html 的请求并插入脚本,text/plain 类型的响应则不会被劫持。
修改子应用 HTML 的 content-type 方法可以自行 google,也有一个更简单高效的方案:
-
子应用发布时从 index.html 复制出一个 index.txt 文件出来
-
将主应用中的 entry 改为 txt 地址,如:
registerMicroApps( [ - { name: 'app1', entry: '//localhost:8080/index.html', render, activeRule }, + { name: 'app1', entry: '//localhost:8080/index.txt', render, activeRule }, ], );
在子应用中添加index.html拷贝index.txt
webpack 复制index.html 在webpack中,你可以使用CopyWebpackPlugin来复制你的index.html文件到构建目录。首先,确保你已经安装了copy-webpack-plugin(webpack4安装5.1.0版本)。
npm install --save-dev copy-webpack-plugin
然后,在你的webpack配置文件中,添加以下代码:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// ... 其他webpack配置
plugins: [
new CopyWebpackPlugin([
{ from: 'index.html', to: 'index.txt' },
]),
],
};
这段代码会在每次构建时将根目录下的index.html文件复制到构建输出目录中。
nodejs 复制index.html
"build": "vue-cli-service build && node copyIndex.js",
// copyIndex.js
const fs = require('fs');
fs.copyFile('dist/index.html', 'dist/index.txt', (err) => {
if (err) throw err;
console.log('文件拷贝成功!');
});
[Bug]内网深信服网管给子项目注入了cookie/flash.js,导致子系统加载失败 · Issue #310 · umijs/qiankun · GitHub