Web 应用通讯的基石 — HTTP 协议

2019.04.19 默认分类 0 评

请求方法

GET

用来请求访问已被 URI 识别的资源。如浏览器请求某个地址的资源。

POST

用来传输实体参数的方法。用法上与 GET 很相似，但不是为了获取相应结果。

PUT

用来传输文件。但在 Web 应用中配合 RESTful 架构实现资源更新。

HEAD

用于确认 URI 及资源的响应头部。

DELETE

与 PUT 方法相反，用于删除文件。

OPTIONS

用于查询请求 URI 资源是否支持指定的方法。常出现跨域资源共享(CORS)中。

返回状态码

从服务器端返回的状态码，描述了当前请求是否被正常处理，还是出现错误。

2XX 成功

200 OK

请求被服务器正常处理，GET 请求会返回资源实体。

3XX 重定向

301 Moved Permanently

302 Found

当浏览器遇到 302 响应时，响应头带上了 Location 字段，用于资源重定向到新的 URI。

在 Laravel 中可以使用 return redirect()->away('https://www.baidu.com'); 来重定向到新的地址。

当 POST 请求被拒返回 302 时，几乎所有浏览器都会再发出一条 GET 请求到 Location 上。

304 Not Modified

作为缓存策略的一部分，当客户端附带了 If-Match，If-Modified-Since，If-None-Match，If-Range，If-Unmodified-Since 其中一种，告知该资源的本地缓存还可以被使用。

典型值为
If-Modified-Since: {Last-Modified}
If-None-Match: {ETag}

HTTP 协议的产生就是被设计用于 Web 浏览器和服务器之间的通信，也直接基于 TCP/IP 协议，这保证传输时比 UDP 可靠。同时还有以下优点

简单
可扩展
无状态

sequenceDiagram
客户端->>服务器: 请求 (Requst)
服务器->>客户端: 响应 (Response)

由像浏览器这样的客户端发出的消息叫做 Requsts，被服务端回应的消息叫做 Responses。

从百度开始，当我们敲下回车键时，浏览器就发出了一条请求：

GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

Chrome 在请求时，使用了 GET 方法来获取在 www.baidu.com 上的资源，没有强制的地写成 http://www.baidu.com:80，并告诉服务当前协议是 1.1 版本。

Host 的 Host: www.baidu.com 正好和 GET 后面的 / 组成 www.baidu.com/ ，如果请求该主机下的其他目录，这个位置也会有相应的变化。

使用 wireshark 可以捕获这个请求，但最直观方法是打开 Chrome Network 面板来查看

在请求头总还有一些字段，

User-Agent 虽然能判断客户端的版本和一些信息，显得非常糟糕的是，它经常在业务上被用来区别和提供不同的页面或者服务。

Accept 客户端告诉服务器可以处理的内容类型，通常这里会用 MIME 类型来表示；反过来，服务器通过响应头中的 Content-Type 来告诉客户端它返回内容的类型。

当服务器收到这个请求时候，经由 Nginx 或 Apache 响应之后，可能还会经过 PHP 或 Java 语言做数据存取处理，最终响应回到了客户端

HTTP/1.1 302 Found
Connection: Keep-Alive
Content-Length: 225
Content-Type: text/html
Date: Sun, 02 Sep 2018 03:57:06 GMT
Location: https://www.baidu.com/
P3p: CP=" OTI DSP COR IVA OUR IND COM "
Server: BWS/1.1
Set-Cookie: BAIDUID=C267DF134F37696F3274F4649989CCD4:FG=1; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BIDUPSID=C267DF134F37696F3274F4649989CCD4; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: PSTM=1535860626; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BD_LAST_QID=13976029323002

常规 General

Request Method , 根据数据流动的方向和交互，HTTP 请求类型分为好几种类型

Request Method	常用场景
GET	获取 HTML CSS JS 图片等资源文件，也用于文本数据（JSON、XML）的获取
OPTIONS	询问服务器某个资源支持的 Request Method ，返回头中会有 `Allow` 或者 `Access-Control-Allow-Methods`。发起跨域请求时，一些应用框架会发起该请求
POST	发送数据给服务器常用的方法，在数据提交时和跨域请求场景下变得复杂

请求 Requst

客户端发出请求时，不论上述的 GET/POST 还是其他方式，下面的请求头都有可能出现：

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

发送数据给服务器常用的方法，需指定请求头中的 Content-Type 来告诉服务器发送内容的实际编码类型，与后端进行数据交换时，需要提前约定好数据类型及结构，这样能高效地推进项目进度。~~在表单提交和资源上传时尤为重要；~~

Content-Type	说明
`text/html; charset=UTF-8`	~~还记得我们编写 HTML 时候首先就是声明了文档类型： `<!DOCTYPE html>`。 `<meta charset="UTF-8">` 也在这里得到了体现~~
`text/css`	CSS 样式文件
`application/javascript`	JavaScript 文件
`image/png`	png 图片资源文件
`application/x-www-form-urlencoded`	请求实体中的数据内容类型以 urldecode 方式带上，GET 时将 encode 后的字符作为 URL 的查询参数`https://92yo6ypwz4.codesandbox.io/abc?aa=111&bb=222`；POST 时 encode 内容存在于实体中（表单提交）`aa=111&bb=222`
`application/json;charset=UTF-8`	告诉服务端请求实体 POST 中带上的数据内容类型为 JSON

在响应头中也存在Content-Type，这样编程时才能预料服务器返回的内容；

Referer: http://www.baidu.com/

当前请求来源页面的地址，某些场景下服务端会校检该字段来作统计分析、日志记录以及缓存优化等。

在支付场景（微信当前调起H5支付的referer为空）下校检了该字段防止非法跳转进入的支付。

Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;

Access-Control-Request-Headers: content-type

Access-Control-Request-Method: POST

响应 Response

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://www.infzm.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-requested-with, content-type, origin, cache-control, pragma, authorization, accept, accept-encoding
Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE

Content-Type: application/json

在响应头中也存在Content-Type，这样编程时才能预料服务器返回的内容

Content-Type: text/html; charset=UTF-8

key	value
data	`{ foo: 'bar', baz: 'qux' }`
dataType	指定响应返回的数据类型，默认识别 HTTP 中 MIME 类型
contentType	请求内容的编码类型默认为 `application/x-www-form-urlencoded`

编码类型

请求 Requst

contentType 指定了请求内容的编码格式，而 jQ 默认使用 application/x-www-form-urlencoded ，使得实体内容会经过 $.param() 序列化：

    $.param({ foo: 'bar', baz: 'qux' }) // "foo=bar&baz=qux"

使得实体数据 encoded

    $.ajax({
        url     : "/api/user/register_by_phone",
        type    : "POST",
        data    : jQuery.param({
            phone      : $(el_arr[0]).val(),
            verify_code: $(el_arr[1]).val(),
            password   : md5($(el_arr[2]).val()),
        }),
        timeout : 50000,
        dataType: 'json',
        success : function (res) {
            if (res.code != 200) {
                resolve(res.msg)
            } else {
                resolve(text_success_register)
            }
        }
    })

响应 Response

dataType 指定服务器返回的实体数据类型，不指定时，就要确保返回的 Content-Type 与实体内容编码一致

Content-Type Content-Type: application/json

参考文献

HTTP - MDN

GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

HTTP/1.1 302 Found
Connection: Keep-Alive
Content-Length: 225
Content-Type: text/html
Date: Sun, 02 Sep 2018 03:57:06 GMT
Location: https://www.baidu.com/
P3p: CP=" OTI DSP COR IVA OUR IND COM "
Server: BWS/1.1
Set-Cookie: BAIDUID=C267DF134F37696F3274F4649989CCD4:FG=1; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BIDUPSID=C267DF134F37696F3274F4649989CCD4; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: PSTM=1535860626; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BD_LAST_QID=13976029323002424979; path=/; Max-Age=1
X-Ua-Compatible: IE=Edge,chrome=1

<html>
<head><title>302 Found</title></head>
<body bgcolor="white">
<center><h1>302 Found</h1></center>
<hr><center>7a367f7b87705e16b985e34ca59b8ae8b1d28d47
Time : Tue Aug 21 10:55:16 CST 2018</center>
</body>
</html>

Hello World

Your description here.

Web 应用通讯的基石 — HTTP 协议

请求方法

GET

POST

PUT

HEAD

DELETE

OPTIONS

返回状态码

2XX 成功

200 OK

3XX 重定向

301 Moved Permanently

302 Found

304 Not Modified

常规 General

请求 Requst

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

Referer: http://www.baidu.com/

Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;

Access-Control-Request-Headers: content-type

Access-Control-Request-Method: POST

响应 Response

Content-Type: application/json

编码类型

请求 Requst

响应 Response

参考文献