Fix(Network): Fix missing Request Headers issue in XHR. (issue #522).

Tencent · Mar 31, 2022 · a2bff5a · a2bff5a
1 parent dde00bd
commit a2bff5a
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 ## 3.14.4-rc (2022-03-??)
 
 - `Fix(Network)` Fix CPU high load bug when response is a large string. (issue #515)
+- `Fix(Network)` Fix missing Request Headers issue in XHR. (issue #522)
 
 
 ## 3.14.3 (2022-03-28)

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -3,6 +3,7 @@
 ## 3.14.4-rc (2022-03-??)
 
 - `Fix(Network)` 修复回包超大时导致的卡死问题。 (issue #515)
+- `Fix(Network)` 修复 XHR 中缺失显示 Request Headers 的问题。 (issue #522)
 
 
 ## 3.14.3 (2022-03-28)

diff --git a/dev/network.html b/dev/network.html
@@ -20,7 +20,8 @@
       <a onclick="postAjax('json')" href="javascript:;" class="weui_btn weui_btn_default">POST XHR (Data: JSON String)</a>
       <a onclick="postAjax('', 'massive.json')" href="javascript:;" class="weui_btn weui_btn_default">POST XHR (Massive Resp)</a>
       <a onclick="optionsXHR()" href="javascript:;" class="weui_btn weui_btn_default">OPTIONS XHR</a>
-      <a onclick="xhrStream()" href="javascript:;" class="weui_btn weui_btn_default">XHR Stream</a>
+      <a onclick="xhrStream('flv')" href="javascript:;" class="weui_btn weui_btn_default">XHR Chunked: flv</a>
+      <a onclick="xhrStream('json')" href="javascript:;" class="weui_btn weui_btn_default">XHR Chunked: json</a>
     </div>
 
     <div class="section">
@@ -43,6 +44,7 @@
 
       <a onclick="sendBeacon()" href="javascript:;" class="weui_btn weui_btn_default">sendBeacon</a>
       <a onclick="axiosRequest('GET')" href="javascript:;" class="weui_btn weui_btn_default">Axios: GET</a>
+      <a onclick="axiosRequest('POST')" href="javascript:;" class="weui_btn weui_btn_default">Axios: POST</a>
       <a onclick="scrolling()" href="javascript:;" class="weui_btn weui_btn_default">Scrolling</a>
       <a onclick="crossDomain()" href="javascript:;" class="weui_btn weui_btn_default">Cross Domain</a>
     </div>
@@ -295,9 +297,9 @@
   });
 }
 
-function xhrStream() {
+function xhrStream(format = 'flv') {
   vConsole.show();
-  const url = './data/stream.flv?id=' + Math.random();
+  const url = `./data/success.${format}?chunked=1&id=` + Math.random();
   const xhr = new XMLHttpRequest();
   xhr.timeout = 11000;
   console.log('xhr type:', typeof xhr, xhr instanceof XMLHttpRequest);
@@ -356,26 +358,7 @@
 }
 
 function axiosRequest(method) {
-  console.info('axiosRequest() Start');
-  axios({
-    method,
-    url: './data/success.json?method=axios&r=' + Math.random(),
-    headers: { 'content-type': 'application/x-www-form-urlencoded' },
-    data: {
-      foo: 'bar'
-    }
-  })
-  .then(function(response) {
-    console.log('axiosRequest response:', response);
-  })
-  .catch(function(error) {
-    console.log('axiosRequest error:', error);
-  });
-  console.info('axiosRequest() End');
-}
-
-function axiosRequest(method) {
-  console.info('axiosRequest() Start');
+  vConsole.show();
   axios({
     method,
     url: './data/success.json?method=axios&r=' + Math.random(),
@@ -390,7 +373,6 @@
   .catch(function(error) {
     console.log('axiosRequest error:', error);
   });
-  console.info('axiosRequest() End');
 }
 
 function optionsXHR() {

diff --git a/src/network/helper.ts b/src/network/helper.ts
@@ -33,7 +33,6 @@ export const genGetDataByUrl = (url: string, getData = {}) => {
  * Generate formatted response data by responseType.
  */
 export const genResonseByResponseType = (responseType: string, response: any) => {
-  console.log('genResonseByResponseType', responseType);
   let ret = '';
   switch (responseType) {
     case '':

diff --git a/src/network/xhr.proxy.ts b/src/network/xhr.proxy.ts
@@ -26,6 +26,9 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
 
       case 'send':
         return this.getSend(target);
+
+      case 'setRequestHeader':
+        return this.getSetRequestHeader(target);
 
       default:
         if (typeof target[key] === 'function') {
@@ -95,7 +98,7 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
     }
   }
 
-  protected getOpen(target) {
+  protected getOpen(target: T) {
     return (...args) => {
       // console.log('Proxy open()');
       const method = args[0];
@@ -109,7 +112,7 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
     };
   }
 
-  protected getSend(target) {
+  protected getSend(target: T) {
     return (...args) => {
       // console.log('Proxy send()');
       const data: XMLHttpRequestBodyInit = args[0];
@@ -119,6 +122,17 @@ export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T
     };
   }
 
+  protected getSetRequestHeader(target: T) {
+    return (...args) => {
+      if (!this.item.requestHeader) {
+        this.item.requestHeader = {};
+      }
+      this.item.requestHeader[args[0]] = args[1];
+      this.triggerUpdate();
+      return target.setRequestHeader.apply(target, args);
+    };
+  }
+
   protected setOnReadyStateChange(target: T, key: string, value) {
     return Reflect.set(target, key, (...args) => {
       this.onReadyStateChange();

diff --git a/webpack.serve.config.js b/webpack.serve.config.js
@@ -25,7 +25,9 @@ module.exports = (env, argv) => {
       ],
       onBeforeSetupMiddleware(devServer) {
         devServer.app.all('*', (req, res) => {
-          if (req.path.includes('.flv')) {
+          const fileType = req.path.split('.').pop();
+          // console.log('Req:::', fileType, req.query)
+          if (fileType === 'flv') {
             res.set({
               'Content-Type': 'video/x-flv',
               // 'Content-Type', 'application/octet-stream',
@@ -50,13 +52,23 @@ module.exports = (env, argv) => {
           } else {
             const delay = req.query.t || Math.ceil(Math.random() * 100);
             setTimeout(() => {
-              res.status(req.query.s || 200);
               const filePath = Path.join(contentBase, req.path);
               try {
                 fs.accessSync(filePath, fs.constants.F_OK);
-                // res.send(fs.readFileSync(filePath));
-                res.sendFile(filePath);
+                res.type(fileType);
+                res.status(req.query.s || 200);
+                if (req.query.chunked) {
+                  res.set({
+                    'Transfer-Encoding': 'chunked',
+                    'Connection': 'keep-alive',
+                  });
+                  res.write(fs.readFileSync(filePath));
+                } else {
+                  res.send(fs.readFileSync(filePath));
+                }
+                // res.sendFile(filePath, options);
               } catch (e) {
+                res.status(404);
                 res.end();
               }
               // console.log(req.query);