From 0d484a78633801f0a493d768a27d9bce2da6a6e7 Mon Sep 17 00:00:00 2001
From: Kuitos <kuitos.lau@gmail.com>
Date: Thu, 18 Mar 2021 13:03:58 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20add=20faq=20about=20how=20to=20e?=
 =?UTF-8?q?nable=20cors=20request=20with=20custom=20fetch=20configuration?=
 =?UTF-8?q?=20(#1328)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/faq/README.md    | 46 +++++++++++++++++++++++++++++++++++++++
 docs/faq/README.zh.md | 50 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+)

diff --git a/docs/faq/README.md b/docs/faq/README.md
index e624d2e..596c248 100644
--- a/docs/faq/README.md
+++ b/docs/faq/README.md
@@ -631,3 +631,49 @@ export async function mount(props) {
 + ReactDOM.render(<App/>, props.container.querySelector('#root'));
 }
 ```
+
+## How to solve the problem that cookies are not carried when pulling micro-app entries
+
+As the requests to pull micro-app entry are all cross-domain, when your micro-app relies on cookies (such as authentication), you need to customize the fetch method to enable the cors mode:
+
+* If you load the microapps through [registerMicroApps](/api#registermicroappsapps-lifecycles), you need to configure a custom fetch in the start method, such as:
+
+  ```js
+  import { start } from 'qiankun';
+  
+  start({ 
+    fetch(url, ...args) {
+      // Enable cors mode for the specified microapp
+      if (url === 'http://app.alipay.com/entry.html') {
+        return window.fetch(url, {
+          ...args,
+          mode: 'cors',
+          credentials: 'include',
+        });
+      }
+  
+      return window.fetch(url, ...args);
+    }
+  });
+  ```
+
+* If you load the microapp via [loadMicroApp](/api#loadmicroappapp-configuration), you need to configure a custom fetch when invoking, such as:
+
+  ```js
+  import { loadMicroApp } from 'qiankun';
+  
+  loadMicroApp(app, {
+    fetch(url, ...args) {
+      // Enable cors mode for the specified microapp
+      if (url === 'http://app.alipay.com/entry.html') {
+        return window.fetch(url, {
+          ...args,
+          mode: 'cors',
+          credentials: 'include',
+        });
+      }
+  
+      return window.fetch(url, ...args);
+    }
+  });
+  ```
diff --git a/docs/faq/README.zh.md b/docs/faq/README.zh.md
index 024550e..bd0832a 100644
--- a/docs/faq/README.zh.md
+++ b/docs/faq/README.zh.md
@@ -704,3 +704,53 @@ export async function mount(props) {
 }
 ```
 
+## 如何解决拉取微应用 entry 时 cookie 未携带的问题
+
+因为拉取微应用 entry 的请求都是跨域的，所以当你的微应用是依赖 cookie (如登陆鉴权)的情况下，你需要通过自定义 fetch 的方式，开启 fetch 的 cors 模式：
+
+* 如果你是通过 [registerMicroApps](/zh/api#registermicroappsapps-lifecycles) 加载微应用的，你需要在 start 方法里配置自定义 fetch，如：
+
+  ```js
+  import { start } from 'qiankun';
+  
+  start({ 
+    fetch(url, ...args) {
+      // 给指定的微应用 entry 开启跨域请求
+      if (url === 'http://app.alipay.com/entry.html') {
+        return window.fetch(url, {
+          ...args,
+          mode: 'cors',
+          credentials: 'include',
+        });
+      }
+  
+      return window.fetch(url, ...args);
+    }
+  });
+  ```
+
+* 如果你是通过 [loadMicroApp](/zh/api#loadmicroappapp-configuration) 加载微应用的，你需要在调用时配置自定义 fetch，如：
+
+  ```js
+  import { loadMicroApp } from 'qiankun';
+  
+  loadMicroApp(app, {
+    fetch(url, ...args) {
+      // 给指定的微应用 entry 开启跨域请求
+      if (url === 'http://app.alipay.com/entry.html') {
+        return window.fetch(url, {
+          ...args,
+          mode: 'cors',
+          credentials: 'include',
+        });
+      }
+  
+      return window.fetch(url, ...args);
+    }
+  });
+  ```
+
+  
+
+
+