掌握HTTP请求的精髓

http请求过程网上有很多博客写的很详尽也总结的很好，本文更多地面向前端来浅显地描述HTTP访问的过程，帮助大家更好的理解流程。本文有很多概念性的东西，晦涩难懂，有不明确或者存疑的地方欢迎版聊谈论。

1、访问过程概览

如果面试的时候问到了这道题，用一句话来回答的话，我会说：客户端向服务端发送访问请求，服务端复制了一份自己的内容返回给客户端的过程，但这是把大象塞进冰箱式的回答。

把大象塞进冰箱这一步还可以继续拆解成一下几个步骤：

打一个类比来解释这个过程：比如我家(client-side)附近新开了一家网红奶茶店(server-side)，我在它家点餐app上下了订单，准备一会儿出门自取回家，一遍喝奶茶一遍撸电影当个快乐宅。

1. HTTP请求：相当于我给奶茶店下的订单，这个订单就是request。
2. 域名:相当于这家网红店的店名。
3. DNS: 要在地图app上查找这家店的地址，DNS相当于这个地图app。
4. IP:地图app告诉我的具体地址。
5. TCP/IP:我要选择何种交通方式过去，走路过去还是骑自行车过去。TCP/IP就是我过去的通讯协议。
6. nginx:店员引导我前往取餐处，这个店员引导我的过程就相当ngnix代理过程。
7. 最后我取了奶茶，这是我的response，返回家，整个过程结束。

2、返还状态码

接上文，我到奶茶店取茶的过程也不会总是一帆风顺的，总会有各种情况发生。

1. 200:一切都好，用餐愉快

//我的request
Request Method: GET
Host: www.milktea.com
//奶茶店的response
Status Code: 200 OK
Date: Thu, 14 May 2020 09:13:25 GMT

2. 307:店内暂时装修，请前往临时小窗口取餐

//我的request
Request Method: GET
Host: www.milktea.com
//奶茶店的response
Status Code: 307 Temporary Redirect
Date: Thu, 14 May 2020 09:13:25 GMT
Location: http://www.milktea.com/temporary/little_window

确切的表述：暂时请前往新的地址。

3. 301:店铺已经永久迁移到新地址

//我的request
Request Method: GET
Host: www.milktea.com
//奶茶店的response
Status Code: 301 Moved Permanently
Date: Thu, 14 May 2020 09:13:25 GMT
Location: http://www.milktea.com/new_address_permently

4. 410:我之前心仪的餐品被撤单了，无法点餐

//我的request
Request Method: GET
Host: www.milktea.com/bobo_brownsugar_tea/
//奶茶店的response
Status Code: 410 Gone

确切的表述是：访问的URI内容已经被有意删除了，拉黑，删微博访问不到都算是这种情况。

5. 500:等了好久就是不给我出单，这家店什么情况？

//我的request
Request Method: GET
Host: www.milktea.com
//奶茶店的response
Status Code: 500 Internal Server Error

确切的表述是：服务端不知道除了什么问题，一直拿不到正确的访问结果。

状态码还有很多，比起全部记住，理解下面的分类会更加有用些：

• 1xx （信息性）：收到请求，正在继续。
• 2xx （成功）：已成功接收，理解并接受该操作。
• 3xx （重定向）：需要采取进一步的措施才能完成请求。
• 4xx （客户端错误）：请求包含错误的语法或无法实现。
• 5xx （服务器错误）：服务器无法满足请求。

3、header到底再说什么

概念与定义：客户端和服务器之间传递的附加信息，还是用奶茶店的那个比喻，它就是发送给奶茶店的订单，是告诉奶茶店需求的描述，也是取得奶茶的信用凭证。没有完善的header，通讯的基础都不存在。

分类：general, request, response 还有一个entity不是很常见，我扒了一下各个大厂的网站很少看到用entity header的。

1. general header

既包括request的信息也含有response的信息，为什么把它们归于到这一类，是因为这些信息与最终要传递的主体没有任何关系。

2. request header

• Accept:目前在使用的client-side浏览器可以接受哪些格式
• Accept-Encoding: 目前在使用的client-side浏览器使用什么样的解码格式
• Accept-Language: 目前在使用的client-side浏览器用什么语言
• Host: 要访问的地址
• User-Agent: 目前在使用的client-side浏览器的版本

3. response header

我剪了一段youtube的response header，里面需要知道的知识点：

• set-cookie：设置cookie的规则，server向client-side返还的这段字段里，第一部分的key=value作为cookie，放到request header里面，然后跟server-side比较，一致了可以完成免密登录等操作。还是刚才奶茶店的例子，我做个不太确切的比喻方便大家理解set-cookie:

//我在奶茶店办理会员卡，奶茶店给我发送了一张会员申请标就是set-cookie
//这就是为什么它在response header里
Set-Cookie: <会员名>=<会员编号> | Expires=<什么时候过期> 
           | Domain=<奶茶店名> | Path=<路径> | priority = <VIP>
//<会员名>=<会员编号>这部分可以作为会员卡(cookie)
//下回我直接刷会员卡就可以了,这就是为什么cookie字段会在request header里。

cookie的内容较多，有机会单独开章。

• x-: 这个表示自定义header，这条规则有争议，它被IETF在2012年6月发布的 RFC5548 中明确弃用了。但是互联网大厂之间的拉锯，真正的边界在哪里还需要时间扯皮。目前大部分还在使用，怎么好用这么来！

4、代码示例演示

写一段简单的express代码，自定义一下header和status code，感受一下整个流程。

//访问/demo的时候
app.get("/demo", (req, res) => {
  res.set("X-full-stack", "4life");
  res.status(418);
  res.send("I prefer coffee");
});

总结

学习这部分知识的意义在于，明白流程，一旦出现错误，可以快速定位究竟是哪里出现了错误，迅速完成debug，提高编程的效率。

参考附录

1. How the Web works
2. HTTP: Response Codes
3. HTTP Headers
4. HTTP headers | Set-Cookie
5. Why do we need headers in the HTTP protocol?