解决:qiankun莫名其妙的去请求一个cookie/flash.js子应用加载失败

254 阅读1分钟

首次加载失败,刷新就正常了。

公司内网配置了深信服的网管系统。
在这环境下访问我们页面时,出现了以下问题:
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,也有一个更简单高效的方案:

  1. 子应用发布时从 index.html 复制出一个 index.txt 文件出来

  2. 将主应用中的 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