fix Rest requests not sending body, fixes #65

cars10 · Aug 13, 2021 · b1aef3a · b1aef3a
1 parent 8d7449d
commit b1aef3a
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,15 @@
 
 *Please check the [releases](https://github.com/cars10/elasticvue/releases) page if you need version release dates.*
 
+## 0.36.2
+
+* [fix]: Rest requests not sending body, fixes [#65][i65]
+
+[i65]: https://github.com/cars10/elasticvue/issues/65
+
 ## 0.36.1
 
-* fix GET requests not sending `Accept: application/json` by default
+* [fix]: GET requests not sending `Accept: application/json` by default
 
 ## 0.36.0
 

diff --git a/src/components/Query/Rest.vue b/src/components/Query/Rest.vue
@@ -34,10 +34,27 @@
 
       <v-row>
         <v-col :md="vertical ? 12 : 6" cols="12">
-          <resizable-container :initial-height="vertical ? 200 : 500" class="mb-4">
+          <resizable-container v-if="canSendBody" :initial-height="vertical ? 200 : 500" class="mb-4">
             <code-editor v-model="request.body" :external-commands="editorCommands"/>
           </resizable-container>
 
+          <div v-else>
+            <div :style="vertical ? 'height: 200px' : 'height: 500px'" class="mb-4">
+              <v-alert :value="true" class="request-body-disabled-hint">
+                <p>
+                  <span v-html="$t('query.rest.get_request_hint.cannot_send_body', { method: request.method })"/>
+                  <button class="btn-link" type="button" @click=" request.method  = 'POST'">
+                    {{ $t('query.rest.get_request_hint.use_post') }}
+                  </button>
+                  {{ $t('query.rest.get_request_hint.query_parameters') }}
+                </p>
+                <p class="mb-0">
+                  {{ $t('query.rest.get_request_hint.search_post') }}
+                </p>
+              </v-alert>
+            </div>
+          </div>
+
           <v-btn id="execute_query" :loading="loading" class="mx-0" color="primary-button" type="submit">
             {{ $t('query.rest.form.send_request') }}
           </v-btn>
@@ -68,7 +85,7 @@
   import ResizableContainer from '@/components/shared/ResizableContainer'
   import PrintPretty from '@/components/shared/PrintPretty'
   import { HTTP_METHODS } from '@/consts'
-  import { ref } from '@vue/composition-api'
+  import { computed, ref } from '@vue/composition-api'
   import RestQueryHistory from '@/components/Query/RestQueryHistory'
   import RestQueryExamples from '@/components/Query/RestQueryExamples'
   import { useRestQuery } from '@/mixins/RestQuery'
@@ -103,6 +120,10 @@
         resetResponse()
       }
 
+      const canSendBody = computed(() => {
+        return request.value.method !== 'GET' && request.value.method !== 'HEAD'
+      })
+
       const reset = () => {
         store.commit('queryRest/resetRequest')
         resetResponse()
@@ -130,6 +151,7 @@
         HTTP_METHODS,
         editorCommands,
         loadData,
+        canSendBody,
         reset,
         setRequest,
         responseStatusClass,

diff --git a/src/locales/cn.json b/src/locales/cn.json
@@ -290,6 +290,12 @@
         "send_request": "发送请求",
         "reset": "重置",
         "download_as_json": "下载为 JSON 文件"
+      },
+      "get_request_hint": {
+        "cannot_send_body": "你无法通过 {method} 发送请求体，如果要发送请求体，请",
+        "use_post": "使用 POST",
+        "query_parameters": "，也可以将查询参数添加到 url。",
+        "search_post": "你可以使用 POST 通过 _search 端点进行搜索。"
       }
     },
     "rest_query_history": {

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -290,6 +290,12 @@
         "send_request": "Send request",
         "reset": "Reset",
         "download_as_json": "Download as json"
+      },
+      "get_request_hint": {
+        "cannot_send_body": "You cannot send a request body via {method}.<br> Please ",
+        "use_post": "use POST",
+        "query_parameters": "if you want to send a request body, alternatively add query parameters to the url.",
+        "search_post": "You can use POST to search with the _search endpoint."
       }
     },
     "rest_query_history": {

diff --git a/src/mixins/RestQuery.js b/src/mixins/RestQuery.js
@@ -8,93 +8,94 @@ import { showErrorSnackbar } from '@/mixins/ShowSnackbar'
 import { vuexAccessors } from '@/helpers/store'
 
 export const useRestQuery = () => {
-  const { request } = vuexAccessors('queryRest', ['request'])
-  const response = ref({ status: '', body: '' })
-  const loading = ref(false)
+    const { request } = vuexAccessors('queryRest', ['request'])
+    const response = ref({ status: '', body: '' })
+    const loading = ref(false)
 
-  const activeInstance = store.getters['connection/activeInstance']
+    const activeInstance = store.getters['connection/activeInstance']
 
-  const requestUrl = () => {
-    if (request.value.path.slice(0, 1) === '/') {
-      return activeInstance.uri + request.value.path
-    } else {
-      return activeInstance.uri + '/' + request.value.path
+    const requestUrl = () => {
+        if (request.value.path.slice(0, 1) === '/') {
+            return activeInstance.uri + request.value.path
+        } else {
+            return activeInstance.uri + '/' + request.value.path
+        }
     }
-  }
 
-  const { connection } = useIdb(IDB_TABLE_NAMES.REST)
-  const setupDb = async () => await connection.initialize()
-  setupDb()
+    const { connection } = useIdb(IDB_TABLE_NAMES.REST)
+    const setupDb = async () => await connection.initialize()
+    setupDb()
 
-  const loadData = () => {
-    loading.value = true
-    response.value.body = '{"loading": true}'
-    response.value.status = ''
+    const loadData = () => {
+        loading.value = true
+        response.value.body = '{"loading": true}'
+        response.value.status = ''
 
-    const xhr = new XMLHttpRequest()
-    xhr.open(request.value.method, requestUrl(), true)
-    if (activeInstance.username.length > 0) {
-      xhr.setRequestHeader('Authorization', buildFetchAuthHeader(activeInstance.username, activeInstance.password))
-    }
-    xhr.setRequestHeader('Accept', 'application/json')
+        const xhr = new XMLHttpRequest()
+        xhr.open(request.value.method, requestUrl(), true)
+        if (activeInstance.username.length > 0) {
+            xhr.setRequestHeader('Authorization', buildFetchAuthHeader(activeInstance.username, activeInstance.password))
+        }
+        xhr.setRequestHeader('Content-Type', 'application/json')
+        xhr.setRequestHeader('Accept', 'application/json')
 
-    xhr.onload = function () {
-      try {
-        response.value.status = `${xhr.status} ${xhr.statusText}`
-        loading.value = false
-        const contentType = xhr.getResponseHeader('Content-Type')
-        if (xhr.responseText && contentType.startsWith('application/json')) {
-          response.value.body = parseJsonBigInt(xhr.responseText)
-        } else {
-          response.value.body = xhr.responseText
+        xhr.onload = function () {
+            try {
+                response.value.status = `${xhr.status} ${xhr.statusText}`
+                loading.value = false
+                const contentType = xhr.getResponseHeader('Content-Type')
+                if (xhr.responseText && contentType.startsWith('application/json')) {
+                    response.value.body = parseJsonBigInt(xhr.responseText)
+                } else {
+                    response.value.body = xhr.responseText
+                }
+
+                if (xhr.status.toString().match(/^2\d\d/)) {
+                    connection.dbInsert({ ...request.value, favorite: 0, date: new Date() })
+                }
+            } catch (e) {
+                loading.value = false
+                response.value.body = '// Error'
+                showErrorSnackbar({ text: 'Error', additionalText: e.toString() })
+            }
         }
 
-        if (xhr.status.toString().match(/^2\d\d/)) {
-          connection.dbInsert({ ...request.value, favorite: 0, date: new Date() })
+        xhr.onerror = function () {
+            loading.value = false
+            response.value.body = '// Network Error'
+            showErrorSnackbar({ text: 'Error', additionalText: 'Network Error' })
         }
-      } catch (e) {
-        loading.value = false
-        response.value.body = '// Error'
-        showErrorSnackbar({ text: 'Error', additionalText: e.toString() })
-      }
-    }
 
-    xhr.onerror = function () {
-      loading.value = false
-      response.value.body = '// Network Error'
-      showErrorSnackbar({ text: 'Error', additionalText: 'Network Error' })
+        xhr.send(request.value.body)
     }
 
-    xhr.send(null)
-  }
-
-  const resetResponse = () => {
-    response.value = {
-      body: '',
-      status: ''
+    const resetResponse = () => {
+        response.value = {
+            body: '',
+            status: ''
+        }
     }
-  }
 
-  const responseStatusClass = computed(() => {
-    if (!response.value.status || response.value.status.length === 0) return 'grey'
+    const responseStatusClass = computed(() => {
+        if (!response.value.status || response.value.status.length === 0) return 'grey'
 
-    if (response.value.status.match(/^2/)) {
-      return 'green black--text'
-    } else if (response.value.status.match(/^3|4/)) {
-      return 'darken-2 yellow black--text'
-    } else if (response.value.status.match(/^5/)) {
-      return 'red black--text'
-    }
+        if (response.value.status.match(/^2/)) {
+            return 'green black--text'
+        } else if (response.value.status.match(/^3|4/)) {
+            return 'darken-2 yellow black--text'
+        } else if (response.value.status.match(/^5/)) {
+            return 'red black--text'
+        }
 
-    return 'grey'
-  })
+        return 'grey'
+    })
 
-  return {
-    request,
-    response,
-    loading,
-    loadData,
-    resetResponse,
-    responseStatusClass
-  }
+    return {
+        request,
+        response,
+        loading,
+        loadData,
+        resetResponse,
+        responseStatusClass
+    }
 }