fix: cors when content-type is set for simple requests

components/http/Body.vue

@@ -24,11 +24,20 @@
           <template #trigger>
             <span class="select-wrapper">
               <ButtonSecondary
-                :label="contentType"
+                :label="contentType || $t('state.none').toLowerCase()"
                 class="rounded-none ml-2 pr-8"
               />
             </span>
           </template>
+          <SmartItem
+            :label="$t('state.none').toLowerCase()"
+            :info-icon="contentType === null ? 'done' : ''"
+            :active-info-icon="contentType === null"
+            @click.native="
+              contentType = null
+              $refs.contentTypeOptions.tippy().hide()
+            "
+          />
           <SmartItem
             v-for="(contentTypeItem, index) in validContentTypes"
             :key="`contentTypeItem-${index}`"
@@ -44,7 +53,15 @@
       </span>
     </div>
     <HttpBodyParameters v-if="contentType === 'multipart/form-data'" />
-    <HttpRawBody v-else :content-type="contentType" />
+    <HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
+    <div
+      v-if="contentType == null"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.body") }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -59,11 +76,7 @@ export default defineComponent({
     return {
       validContentTypes: Object.keys(knownContentTypes),
 
-      contentType: useStream(
-        restContentType$,
-        "application/json",
-        setRESTContentType
-      ),
+      contentType: useStream(restContentType$, null, setRESTContentType),
     }
   },
 })

components/http/RawBody.vue

@@ -31,7 +31,7 @@
           @click.native="clearContent('rawParams', $event)"
         />
         <ButtonSecondary
-          v-if="contentType.endsWith('json')"
+          v-if="contentType && contentType.endsWith('json')"
           ref="prettifyRequest"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.prettify')"

helpers/types/HoppRESTRequest.ts

@@ -31,6 +31,9 @@ export type HoppRESTReqBody =
       body: string
     }
   | HoppRESTReqBodyFormData
+  | {
+      contentType: null
+    }
 
 export interface HoppRESTRequest {
   v: string

helpers/utils/EffectiveURL.ts

@@ -13,13 +13,17 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
   effectiveFinalURL: string
   effectiveFinalHeaders: { key: string; value: string }[]
   effectiveFinalParams: { key: string; value: string }[]
-  effectiveFinalBody: FormData | string
+  effectiveFinalBody: FormData | string | null
 }
 
 function getFinalBodyFromRequest(
   request: HoppRESTRequest,
   env: Environment
-): FormData | string {
+): FormData | string | null {
+  if (request.body.contentType === null) {
+    return null
+  }
+
   if (request.body.contentType === "multipart/form-data") {
     const formData = new FormData()
 
@@ -93,11 +97,12 @@ export function getEffectiveRESTRequest(
   }
 
   const effectiveFinalBody = getFinalBodyFromRequest(request, environment)
-  effectiveFinalHeaders.push({
-    active: true,
-    key: "content-type",
-    value: request.body.contentType,
-  })
+  if (request.body.contentType)
+    effectiveFinalHeaders.push({
+      active: true,
+      key: "content-type",
+      value: request.body.contentType,
+    })
 
   return {
     ...request,

newstore/RESTSession.ts

@@ -37,8 +37,7 @@ export const defaultRESTRequest: HoppRESTRequest = {
   preRequestScript: "",
   testScript: "",
   body: {
-    contentType: "application/json",
-    body: "",
+    contentType: null,
   },
 }
 
@@ -201,7 +200,7 @@ const dispatchers = defineDispatchers({
   },
   setContentType(
     curr: RESTSession,
-    { newContentType }: { newContentType: ValidContentTypes }
+    { newContentType }: { newContentType: ValidContentTypes | null }
   ) {
     // TODO: persist body evenafter switching content typees
     if (curr.request.body.contentType !== "multipart/form-data") {
@@ -223,7 +222,10 @@ const dispatchers = defineDispatchers({
             ...curr.request,
             body: <HoppRESTReqBody>{
               contentType: newContentType,
-              body: curr.request.body.body,
+              body:
+                newContentType === null
+                  ? undefined
+                  : (curr.request.body as any).body,
             },
           },
         }
@@ -591,7 +593,7 @@ export function updateFormDataEntry(index: number, entry: FormDataKeyValue) {
   })
 }
 
-export function setRESTContentType(newContentType: ValidContentTypes) {
+export function setRESTContentType(newContentType: ValidContentTypes | null) {
   restSessionStore.dispatch({
     dispatcher: "setContentType",
     payload: {