📝 modified example of custom fetch (#1779)

Co-authored-by: Kuitos <kuitos.lau@gmail.com>
This commit is contained in:
gongshun 2021-10-27 21:25:18 +08:00 committed by GitHub
parent 71b11d08f4
commit b86fffcdbe
2 changed files with 66 additions and 1 deletions

View File

@ -477,6 +477,71 @@ Since qiankun get assets which imported by sub app via fetch, these static resou
See [Enable Nginx Cors](https://enable-cors.org/server_nginx.html).
## How to solve that micro apps loaded failed due to abnormal scripts inserted dynamically by carriers
Scripts inserted by carriers are usually marked with `async` to avoid loading of block micro apps. This is usually no problem, such as:
```html
<script async src="//www.rogue.com/rogue.js"></script>
```
However, if some inserted scripts are not marked as `async`, once such scripts fail to run, the entire application will be blocked and subsequent scripts will no longer be executed. We can solve this problem in the following ways:
### Use a custom `getTemplate` method
Filter abnormal scripts in the HTML template of the micro app through the `getTemplate` method implemented by yourself.
```js
import { start } from 'qiankun';
start({
getTemplate(tpl) {
return tpl.replace('<script src="/to-be-replaced.js"><script>', '');
},
});
```
### Use custom fetch method
Intercept abnormal scripts through the `fetch` method implemented by yourself.
```js
import { start } from 'qiankun';
start({
async fetch(url, ...args) {
if (url === 'http://to-be-replaced.js') {
return {
async text() {
return '';
},
};
}
return window.fetch(url, ...args);
},
});
```
### Change the response Content-type of micro app's HTML to `text/plain` (ultimate solution)
The principle is that the carriers can only recognize the request whose response's `content-type` is `text/html` and insert the script, and the response of the `text/plain` type will not be hijacked.
How to modify the `content-type` of the response header of the micro-application HTML request, you can google it yourself, and there is a simpler and more efficient solution:
1. Copy an `index.txt` file from `index.html` when the micro-app is published.
2. Change `entry` in the main app to a txt address, for example:
```diff
registerMicroApps(
[
- { name: 'app1', entry: '//localhost:8080/index.html', container, activeRule },
+ { name: 'app1', entry: '//localhost:8080/index.txt', container, activeRule },
],
);
```
## How to guarantee the main app stylesheet isolated with sub apps?
Qiankun will isolate stylesheet between your sub apps automatically, you can manually ensure isolation between master and child applications. Such as add a prefix to all classes in the master application, and if you are using [ant-design](https://ant.design), you can follow [this doc](https://ant.design/docs/react/customize-theme) to make it works.

View File

@ -514,7 +514,7 @@ start({
import { start } from 'qiankun';
start({
fetch(url, ...args) {
async fetch(url, ...args) {
if (url === 'http://to-be-replaced.js') {
return {
async text() {