处理请求头参数encodeURIComponent

Author: HGthecode

src/views/apiDetail/debug/Index.vue

@@ -124,7 +124,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, PropType, watchEffect, toRefs, computed } from "vue";
+import { defineComponent, reactive, PropType, watchEffect, toRefs, computed, watch } from "vue";
 import { ApiDetailState, FileData, UploadFileState } from "../interface";
 import { Table, Button, message, Upload, Alert, Empty } from "ant-design-vue";
 import { ReloadOutlined } from "@ant-design/icons-vue";
@@ -271,11 +271,14 @@ export default defineComponent({
       return [];
     }
 
-    watchEffect(() => {
-      if (props.detail.header) {
-        state.headerData = renderHeaderData(props.detail.header);
+    watch(
+      () => props.detail.header,
+      () => {
+        state.headerData = renderHeaderData(props.detail.header as ParamItem[]);
       }
-    });
+    );
+    state.headerData = renderHeaderData(props.detail.header as ParamItem[]);
+
     watchEffect(() => {
       if (props.detail.param) {
         const json = renderCodeJsonByParams(props.detail.param, true);
@@ -371,7 +374,7 @@ export default defineComponent({
             item.value &&
             (!item.appKey || item.appKey === "global" || item.appKey === state.appKey)
           ) {
-            headers[item.name] = item.value;
+            headers[item.name] = encodeURIComponent(item.value);
           }
         });
       }
@@ -389,7 +392,7 @@ export default defineComponent({
       if (state.headerData && state.headerData.length) {
         state.headerData.forEach((item) => {
           if (item.name && item.default) {
-            headers[item.name] = item.default;
+            headers[item.name] = encodeURIComponent(item.default);
           }
         });
       }
@@ -424,6 +427,7 @@ export default defineComponent({
         json.data = json.params;
         delete json.params;
       }
+
       Axios(url, json)
         .then((res) => {
           // 执行后置方法

src/views/apiDetail/debug/handleEvent.ts

@@ -6,7 +6,7 @@ import { Store } from "vuex";
 import md5 from "js-md5";
 import { t } from "@/hooks/useI18n";
 import Axios from "@/utils/http/index";
-import { isArray } from "lodash";
+import { isArray, isObject } from "lodash";
 import { DebugEventEnum } from "@/enums/debugEventEnum";
 import moduleName from "ant-design-vue";
 
@@ -69,7 +69,7 @@ const events = {
   ): Promise<EventResult> {
     return new Promise((resolve, reject) => {
       if (eventItem.key) {
-        json.headers[eventItem.key] = value;
+        json.headers[eventItem.key] = encodeURIComponent(value);
         const res: EventResult = {
           event: eventItem,
           json,
@@ -279,8 +279,8 @@ const events = {
                 }
               } else if (item.event === "setHeader") {
                 if (item.key) {
-                  ajaxOptions.headers[item.key] = itemValue;
-                } else {
+                  ajaxOptions.headers[item.key] = encodeURIComponent(itemValue);
+                } else if (isObject(itemValue)) {
                   ajaxOptions.headers = itemValue;
                 }
               }
@@ -306,7 +306,7 @@ const events = {
                   if (item.key && item.event === "setParam") {
                     json.params[item.key] = itemValue;
                   } else if (item.key && item.event === "setHeader") {
-                    json.headers[item.key] = itemValue;
+                    json.headers[item.key] = encodeURIComponent(itemValue);
                   }
                 }
               }
@@ -327,7 +327,7 @@ const events = {
 };
 
 /**
- * 调试请求前事件处理
+ * 调试请求事件处理
  * @param eventList
  * @param json
  * @param store