HTTP请求时POST参数到底应该怎么传?

前言

接口请求现在基本上是应用必备了, 各个请求库用了这么多年从来没出什么岔子.
不过最近却产生了一点疑惑, 为什么之前用的好好的POST方法访问新接口时提示传递参数为空呢? 为什么网络上的接口请求测试工具中有两种参数形式呢?

这是因为 http 请求头内的 content-type 不一样导致的 (used with POST and PUT requests)

---

HTTP 请求头/响应头简述

这里摘录几张图片

请求三要素:

响应三要素

这里只分析请求头的content-type, 请他的请参考 https://en.wikipedia.org/wiki/List_of_HTTP_header_fields

---

header_content-type

根据应用场景的不同,HTTP请求的请求体有三种不同的形式, 通过header中的content-type指定, 这里只分析两个:

1. application/x-www-form-urlencoded(默认类型)

如果不指定其他类型的话, 默认是x-www-form-urlencoded, 此类型要求参数传递样式为 key1=value1&key2=value2

2. application/json

更适合传递大数据的形式, 参数样式就是json格式, 例如{"key1":"value1","key2":[1,2,3]}等.

---

常见网络请求工具的两种请求方式的写法

1. React-fetch

1. application/x-www-form-urlencoded

   let formData = new FormData();
   formData.append("key", "value");
   
   fetch(url, {
           method: "POST",
           credentials: "include",
           body: formData,
           headers: {
               'content-type': 'application/x-www-form-urlencoded' // 或者不填
           },
   }).then(...)
   
   

2. application/json

   let modelData= new ModelData();
   
   fetch(url, {
           method: "POST",
           credentials: "include",
           body: JSON.stringify(modelData),
           headers: {
               'content-type': 'application/json'
           },
   }).then(...)
   
   

2. Retrofit

1. application/x-www-form-urlencoded

   @FormUrlEncoded
   @POST(url)
   fun getData(@Field("key") value: String): Observable<ResponseModel>
   
   

2. application/json

   @POST(url)
   @Headers("Content-Type:application/json;charset=UTF-8")
   fun postTest(@Body body: PostData): Observable<ResponseModel>
   
   

3. OkGo

1. application/x-www-form-urlencoded

   OkGo.<ResponseModel>post("http://asset.cns.com.cn/mobilescandim")
              .params("key1", "value1")
              .params("key2", "value2")
              .execute();
              
   

2. application/json

   OkGo.<ResponseModel>post("http://asset.cns.com.cn/mobilescandim")
              .upJson("PostData对象的json字符串")
              .execute();
              
   

4. 网络接口请求测试工具

1. application/x-www-form-urlencoded

   需要采用单独添加参数的方式
   

2. application/json

   批量添加参数
   

---

附两张接口抓包截图

注意其中的 Content-Type

1. 普通接口的Request:
   

2. 上传文件接口的Request