博客 / 詳情

返回

http請求時Form Data & Request Payload的區別

在與後端的調試中發現一個問題,使用post發請求時,發送的params後端一直説沒收到參數,F12發現參數確確實實已經發送了。如圖:

formData.png

使用swagger發送同樣的參數請求卻可以接收到:

RequestPayload.png

通過比對發現,兩者的不同在於一個參數類型是Form Data,一個是Request Payload。什麼意思呢?

百度一下 你就知道

Request Payload更準確的説是http request的payload body。一般用在數據通過POST請求或者PUT請求。它是HTTP請求中空行的後面那部分。(PS:這裏涉及一個http常被問到的問題,http請求由哪幾部分組成,一般是請求行,請求頭,空行,請求體。payload body應該是對應請求體。)

一個請求伴隨着header設置為Content-Type: application/json時,參數看起來是這樣的:

POST /some-path HTTP/1.1 Content-Type: application/json { "foo" : "bar", "name" : "John" }

如果你只是正常的請求一個ajax請求,瀏覽器是會把你提交的params作為Payload展示出來,因為他也不知道params來自哪裏。

但如果你提交的請求設置了method="POST" 並且header設置了Content-Type: application/x-www-form-urlencoded或者Content-Type: multipart/form-data,那麼你的請求看起來就是下面這樣的,類似GET請求裏的參數拼接:

POST /some-path HTTP/1.1 Content-Type: application/x-www-form-urlencoded foo=bar&name=Jack

這裏的form data就是request payload,在這裏瀏覽器知道的更多:他知道bar是表單foo的值Jack是name的值,所以這裏做了展示。

在回到之前的問題,通過觀察圖片發現,兩者的區別確實是因為header中Content Type的值設置不同導致的:

compare.png

通過查看request.js證實了這個驗證:

http.png

解決辦法:

在請求中,設置一個header即可

api.png

  • 參考:https://segmentfault.com/a/1190000018774494
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.