記錄--get請求參數放在body中？

-Advertisement-

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1、背景與後端對介面時，看到有一個get請求的介面，它的參數是放在body中的 ******get請求參數可以放在body中？？隨即問了後端，後端大哥說在postman上是可以的，還給我看了截圖可我傳參怎麼也調不通！下麵就來探究到 ...

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1、背景

與後端對介面時，看到有一個get請求的介面，它的參數是放在body中的

******get請求參數可以放在body中？？

隨即問了後端，後端大哥說在postman上是可以的，還給我看了截圖

可我傳參怎麼也調不通！

下麵就來探究到底是怎麼回事

2、能否發送帶有body參數的get請求

項目中使用axios來進行http請求，使用get請求傳參的基本姿勢：

// 參數拼接在url上
axios.get(url, {
  params: {}
})

如果想要將參數放在body中，應該怎麼做呢？

查看axios的文檔並沒有看到對應說明，去github上翻看下axios源碼看看

在lib/core/Axios.js文件中

可以看到像delete、get、head、options方法，它們只接收兩個參數，不過在config中有一個data

熟悉的post請求，它接收的第二個參數data就是放在body的，然後一起作為給this.request作為參數

所以看樣子get請求應該可以在第二個參數添加data屬性，它會等同於post請求的data參數

順著源碼，再看看lib/adapters/xhr.js，上面的this.request最終會調用這個文件封裝的XMLHttpRequest

export default isXHRAdapterSupported && function (config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    let requestData = config.data

    // 將config.params拼接在url上
    request.open(config.method.toUpperCase(), 
                 buildURL(fullPath, config.params, config.paramsSerializer), true);
    
    // 省略若幹代碼
    ...

    // Send the request
    request.send(requestData || null);
  });
}

最終會將data數據發送出去

所以只要我們傳遞了data數據，其實axios會將其放在body發送出去的

2.1 實戰

本地起一個koa服務，弄一個簡單的介面，看看後端能否接收到get請求的body參數

router.get('/api/json', async (ctx, next) => {
	console.log('get請求獲取body： ', ctx.request.body)
  
	ctx.body = ctx.request.body
})

router.post('/api/json', async (ctx, next) => {
	console.log('post請求獲取body： ', ctx.request.body)

	ctx.body = ctx.request.body
})

為了更好地比較，分別弄了一個get和post介面

前端調用介面：

const res = await axios.get('/api/json', {
  data: {
    id: 1,
    type: 'GET'
  }
})


const res = await axios.post('/api/json', {
  data: {
    id: 2,
    type: 'POST'
  }
})
console.log('res--> ', res)

在axios的send處打一個斷點

可以看到數據已經被放到body中了

後端已經接收到請求了，但是get請求無法獲取到body！

結論：

前端可以發送帶body參數的get請求，但是後端接收不到
這就是介面一直調不通的原因

3、這是為何呢？

我們查看WHATGW標準，在XMLHttpRequest中有這麼一個說明：

大概意思：如果請求方法是`GET`或`HEAD` ，那麼`body`會被忽略的

所以我們雖然傳遞了，但是會被瀏覽器給忽略掉

這也是為什麼使用postman可以正常請求，但是前端調不通的原因了

因為postman並沒有遵循WHATWG的標準，body參數沒有被忽略

3.1 `fetch`是否可以？

fetch.spec.whatwg.org/#request-cl…

答案：也不可以，fetch會直接報錯

總結

結論：瀏覽器並不支持get請求將參數放在body中
XMLHTTPRequest會忽略body參數，而fetch則會直接報錯

本文轉載於:

https://juejin.cn/post/7283367128195055651

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

您的分享是我們最大的動力!