bugfix(Web): 修复api-mock拦截接口导致跨域错误

Web/packages/utils/src/network.js

@@ -31,11 +31,17 @@ export class Request extends EventEmitter{
     const originOpen = winXhrProto.open;
     const originSetRequestHeader = winXhrProto.setRequestHeader;
     // XMLHttp
-    window.XMLHttpRequest.prototype.setRequestHeader = function(){
-
-      originSetRequestHeader.apply(this, arguments);
+    window.XMLHttpRequest.prototype.setRequestHeader = function(...args){
+      if(Req.hookXhrConfig.onBeforeSetRequestHeader) {
+        args = Req.hookXhrConfig.onBeforeSetRequestHeader(args, this.reqConf);
+        // 返回false则取消设置请求头 （api-mock拦截接口，会将post改为get 此时设置请求头Content-Type会报跨域错误）
+        args && originSetRequestHeader.apply(this, args);
+      } else {
+        originSetRequestHeader.apply(this, args);
+      }
     }
     window.XMLHttpRequest.prototype.open = function (...args) {
+      let originArgs = {...args}
       args = Req.hookXhrConfig.onBeforeOpen && Req.hookXhrConfig.onBeforeOpen(args) || args
       const xhr = this;
       this.reqConf = {
@@ -44,6 +50,10 @@ export class Request extends EventEmitter{
         requestInfo: {
           method: args[0].toUpperCase(),
           url: args[1]
+        },
+        originRequestInfo: {
+          method: originArgs[0].toUpperCase(),
+          url: originArgs[1]
         }
       }
 

Web/packages/web/src/plugins/api-mock/index.js

@@ -80,10 +80,11 @@ export default new RouterPlugin({
               })
             }
           })
-          sceneId && fetchArgs[1] && (fetchArgs[1].method = 'get')
+          sceneId && fetchArgs[1] && (fetchArgs[1].method = 'get') && (fetchArgs[1].headers && delete fetchArgs[1].headers)
           sceneId && (fetchArgs[0] = `${mockBaseUrl}/api/app/scene/${sceneId}`)
           return fetchArgs;
-        }
+        },
+        
       });
       request.hookXhr({
         onBeforeOpen: (args) => {
@@ -104,6 +105,25 @@ export default new RouterPlugin({
           sceneId && (args[1] = `${mockBaseUrl}/api/app/scene/${sceneId}`)
           return args;
         },
+        onBeforeSetRequestHeader: (args, config) => {
+          let checkedInterfaceList = getCheckedInterfaceList(state.interfaceList)
+          let url = config.originRequestInfo.url;
+          let path = `/`+getPartUrlByParam(url, 'path')
+          let sceneId = ''
+          checkedInterfaceList.forEach(i => {
+            if(i.path === path) {
+              i.sceneList.forEach(scene => {
+                if(scene.checked) {
+                  sceneId = scene._id
+                }
+              })
+            }
+          })
+          if (sceneId) {
+            return false
+          }
+          return args
+        }
       });
   },
   onUnload(){}

Web/playground/index.html

@@ -19,29 +19,33 @@
 </script>
 <script>
   setTimeout(() => {
-    fetch('https://www.tianqiapi.com/free/week?appid=68852321&appsecret=BgGLDVc7', {
-      // body: JSON.stringify({
-      //   a:1
-      // }),
-      method: 'post',
-    })
-      .then((response) => {
-        let weatherInfo = response.json();
-        return weatherInfo;
-      })
-      .then((info) => {
-        console.log('weatherInfo', info)
-      });
+    // fetch('https://www.tianqiapi.com/free/week?appid=68852321&appsecret=BgGLDVc7', {
+    //   // body: JSON.stringify({
+    //   //   a:1
+    //   // }),
+    //   headers: new Headers({
+    //     'Content-Type': 'text/html; charset=utf-8'
+    //   }),
+    //   method: 'post',
+    // })
+    //   .then((response) => {
+    //     let weatherInfo = response.json();
+    //     return weatherInfo;
+    //   })
+    //   .then((info) => {
+    //     console.log('weatherInfo', info)
+    //   });
 
-    // function reqListener () {
-    //   console.log('asasdasd', this.responseText);
-    // }
-    // var oReq = new XMLHttpRequest();
-    // oReq.addEventListener("load", reqListener);
-    // oReq.open("post", "https://www.tianqiapi.com/free/week?appid=68852321&appsecret=BgGLDVc7");
-    // oReq.send(JSON.stringify({
-    //   a:1
-    // }));
+    function reqListener () {
+      console.log('asasdasd', this.responseText);
+    }
+    var oReq = new XMLHttpRequest();
+    oReq.addEventListener("load", reqListener);
+    oReq.open("post", "https://www.tianqiapi.com/free/week?appid=68852321&appsecret=BgGLDVc7");
+    oReq.setRequestHeader('Content-Type', 'text/html; charset=utf-8')
+    oReq.send(JSON.stringify({
+      a:1
+    }));
   }, 5000);
 </script>
 </html>
\ No newline at end of file