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:店员引导我前往取餐处，这个店员引导我的过程就相当nginx代理过程。
  7. 最后我取了奶茶，这是我的response，返回家，整个过程结束。

2、返还状态码

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

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

 

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

 

3.301:店铺已经永久迁移到新地址

 

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

 

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

 

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

  • 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，感受一下整个流程。

 

 

 

 

 

总结

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