HTTP“请求”和“响应”的报头及正文详解

[一、请求 "报头" (header)](#一、请求 "报头" (header))

[二、请求 "正文" (body)](#二、请求 "正文" (body))

[2.1 application/x-www-form-urlencoded](#2.1 application/x-www-form-urlencoded)

[2.2 multipart/form-data](#2.2 multipart/form-data)

[2.3 application/json](#2.3 application/json)

[三、HTTP 响应状态码](#三、HTTP 响应状态码)

[四、响应 "报头" (header)](#四、响应 "报头" (header))

[五、响应 "正文" (body)](#五、响应 "正文" (body))

[5.1 text/html](#5.1 text/html)

[5.2 text/css](#5.2 text/css)

[5.3 application/javascript](#5.3 application/javascript)

[5.4 application/json](#5.4 application/json)

header 的整体的格式也是 "键值对" 结构。每个键值对占一行，键和值之间使用分号分割。
Host ：表示服务器主机的地址和端口。
Content-Length ：表示 body 中的数据长度。
Content-Type ：表示请求的 body 中的数据格式。
常见选项:

application/x-www-form-urlencoded: form 表单提交的数据格式。此时 body 的格式形如:

title=test&content=hello
multipart/form-data: form 表单提交的数据格式(在 form 标签中加上 enctyped="multipart/form-data"）。通常用于提交图片/文件。body 格式形如:

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3Trw
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
application/json: 数据为 json 格式。body 格式形如:

{"username":"123456789","password":"xxxx","code":"jw7l","uuid":"d110a05ccde64b16.....}
User-Agent (简称 UA) ：表示浏览器/操作系统的属性。形如：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)

其中 Windows NT 10.0; Win64; x64 表示操作系统信息；
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77；
Safari/537.36 表示浏览器信息。

Referer ：表示这个页面是从哪个页面跳转过来的。形如

https://v.bitedu.vip/login

如果直接在浏览器中输入URL, 或者直接通过收藏夹访问页面时是没有 Referer 的。

Cookie ：Cookie 中存储了一个字符串，这个数据可能是客户端(网页)自行通过 JS 写入的，也可能来自于服务器。

服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据。往往可以通过Cookie这个字段实现 "身份标识" 的功能。

二、请求 "正文" (body)

正文中的内容格式和 header 中的 Content-Type 密切相关。上面也罗列了三种常见的情况。
下面可以通过抓包来观察这几种情况:

2.1 application/x-www-form-urlencoded

POST https://gitee.com/profile/upload_portrait_with_base64 HTTP/1.1
Host: gitee.com
Connection: keep-alive
Content-Length: 107389
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
Accept: */*
X-CSRF-Token: 6ROfZGr4Y7Qx8td1TuKCnrG8gbODLCSUqUBZSw2b+ac=
X-Requested-With: XMLHttpRequest
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Origin: https://gitee.com
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://gitee.com/HGtz2222
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: oschina_new_user=false; user_locale=zh-CN; yp_riddler_id=1ce4a551-a160-4

avatar=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAPgAAAD4CAYAAADB0Ss

2.2 multipart/form-data

POST https://v.bitedu.vip/tms/oss/upload/file HTTP/1.1
Host: v.bitedu.vip
Connection: keep-alive
Content-Length: 293252
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjFiYThjMDM5L
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary8d5Rp4eJgrUSS3
Accept: */*
Origin: https://v.bitedu.vip
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://v.bitedu.vip/personInf/student?userId=665
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: rememberMe=true; username=18691491410; Admin-Token=eyJhbGciOiJIUzUxMiJ9.

------WebKitFormBoundary8d5Rp4eJgrUSS3wT
Content-Disposition: form-data; name="file"; filename="李星亚 Java开发⼯程师.pdf"
Content-Type: application/pdf
%PDF-1.7
%³ 
1 0 obj
<</Names <</Dests 4 0 R>> /Outlines 5 0 R /Pages 2 0 R /Type /Catalog>>
endobj
3 0 obj
<</Author ( N v~N ) /Comments () /Company () /CreationDate (D:20201122145133+06'
endobj
13 0 obj
<</AIS false /BM /Normal /CA 1 /Type /ExtGState /ca 1>>
endobj

2.3 application/json

POST https://v.bitedu.vip/tms/login HTTP/1.1
Host: v.bitedu.vip
Connection: keep-alive
Content-Length: 105
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS
Content-Type: application/json;charset=UTF-8
Access-Control-Allow-Origin: *
Accept: application/json, text/plain, */*
Access-Control-Allow-Headers: Content-Type, Content-Length, Authorization, Accep
Origin: https://v.bitedu.vip
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://v.bitedu.vip/login
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: rememberMe=true; username=123456789

{"username":"123456789","password":"xxxx","code":"u58u","uuid":"9bd8e09ea27b48cd

三、HTTP 响应状态码

状态码表示访问一个页面的结果。(是访问成功, 还是失败, 还是其他的一些情况...)。以下为常见的状态码：

200 OK
这是一个最常见的状态码，表示访问成功。

404 Not Found

没有找到资源。浏览器输入一个 URL，目的就是为了访问对方服务器上的一个资源。如果这个URL 标识的资源不存在，那么就会出现 404。

403 Forbidden
表示访问被拒绝。有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问)，如果用户没有登陆直接访问，就容易见到 403。
405 Method Not Allowed
HTTP 中所支持的方法有 GET, POST, PUT, DELETE 等，但是对方的服务器不一定都支持所有的方法(或者不允许用户使用一些其他的方法）。
500 Internal Server Error
服务器出现内部错误。一般是服务器的代码执行过程中遇到了一些特殊情况(服务器异常崩溃)会产生这个状态码。
504 Gateway Timeout
当服务器负载比较大的时候，服务器处理单条请求的时候消耗的时间就会很长，就可能会导致出现超时的情况。
302 Move temporarily
临时重定向。

理解 "重定向" ：就相当于手机号码中的 "呼叫转移" 功能。
比如我本来的手机号是 186-1234-5678, 后来换了个新号码 135-1234-5678，那么不需要让我的朋友知道新号码，只要我去办理一个呼叫转移业务，其他人拨打 186-1234-5678 , 就会自动转移到 135-1234-5678 上。
在登陆页面中经常会见到 302。用于实现登陆成功后自动跳转到主页。响应报文的 header 部分会包含一个 Location 字段, 表示要跳转到哪个页面。

301 Moved Permanently

永久重定向。当浏览器收到这种响应时，后续的请求都会被自动改成新的地址， 301 也是通过 Location 字段来表示要重定向到的新地址。

响应报头的基本格式和请求报头的格式基本一致。类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致。
Content-Type：
响应中的 Content-Type 常见取值有以下几种:

text/html : body 数据格式是 HTML
text/css : body 数据格式是 CSS
application/javascript : body 数据格式是 JavaScript
application/json : body 数据格式是 JSON

五、响应 "正文" (body)

正文的具体格式取决于 Content-Type，观察抓包结果中的响应部分。

5.1 text/html

Server: nginx/1.17.3
Date: Thu, 10 Jun 2021 07:25:09 GMT
Content-Type: text/html; charset=utf-8
Last-Modified: Thu, 13 May 2021 09:01:26 GMT
Connection: keep-alive
ETag: W/"609ceae6-3206"
Content-Length: 12806
<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible 
 body,
 #app {
 height: 100%;
 margin: 0px;
 padding: 0px;
 }
 .chromeframe {
 margin: 0.2em 0;
 background: #ccc;
 color: #000;
 padding: 0.2em 0;
 }
 #loader-wrapper {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 999999;
 }
......

5.2 text/css

HTTP/1.1 200 OK
Server: nginx/1.17.3
Date: Thu, 10 Jun 2021 07:25:09 GMT
Content-Type: text/css
Last-Modified: Thu, 13 May 2021 09:01:26 GMT
Connection: keep-alive
ETag: W/"609ceae6-3cfbe"
Content-Length: 249790

@font-face{font-family:element-icons;src:url(../../static/fonts/element-icons.53
......

5.3 application/javascript

HTTP/1.1 200 OK
Server: nginx/1.17.3
Date: Thu, 10 Jun 2021 07:25:09 GMT
Content-Type: application/javascript; charset=utf-8
Last-Modified: Thu, 13 May 2021 09:01:26 GMT
Connection: keep-alive
ETag: W/"609ceae6-427d4"
Content-Length: 27234

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["app"],{0:function(t,
......

5.4 application/json

HTTP/1.1 200
Server: nginx/1.17.3
Date: Thu, 10 Jun 2021 07:25:10 GMT
Content-Type: application/json;charset=UTF-8
Connection: keep-alive
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
vary: accept-encoding
Content-Length: 12268

{"msg":"操作成功","code":200,"permissions":[] }