Mather Blog

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

默认分类 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 面板来查看

image

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

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/cssCSS 样式文件
application/javascriptJavaScript 文件
image/pngpng 图片资源文件
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

keyvalue
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>

laravel-mix — 在后端项目中的构建方式

发表评论
撰写评论