学习前端时需要了解的关于 http 的知识

为什么要了解http

学习前端不能只会前端，在如今说前后端分离的情况下，我们在工作中少不了与后端打交道，我们需要发送请求去获取数据。对http有一定了解后，你会对前后端交互有一个更好的了解，当我们使用接口去发送请求时，对于其中的逻辑处理就会更加清晰。

http概念

是服务器与浏览器之间传输超文本的协议。

http请求方式

http有八大请求：options、head、get、post、put、delete、trace、connect，常用的有 get 和 post。
关于八大请求：八大请求本质上没什么区别，只是为了语义化。rest api就是利用了请求的语义化。
常用的请求方式：常用的有get请求和post请求当处理敏感数据使用 post，例：用户的登录信息，非敏感数据使用get，例：返回的是html页面。
get请求和post请求的区别
1.post请求安全性相对get较好，因为请求参数不会显示在浏览器地址栏。
2.get请求的 url (请求路径+请求参数) 的长度是受限制的，post请求没有限制。
3.post请求的url 的数据类型是没有限制的，get请求的url只能是 ASCII 字符。
4.get请求的允许的最大传输数据相对post较小。
api分类
1.非 restful 风格：不使用语义化请求方式编写的路由
2.restful 风格：使用语义化请求方式编写的路由，使得一个请求路径可以对应多个api以express为例：

app.post('/user',(req,res)=>{     // 添加某个用户的路由，里面写增相关的逻辑
  
})

app.delete('/user',(req,res)=>{   //删除某个用户的路由，里面写删相关的逻辑
  
})
app.put('/user',(req,res)=>{     // 修改某个用户的路由，里面写改相关的逻辑

})
app.get('/user',(req,res)=>{    // 查询所有用户的路由，里面写查相关的逻辑
    
})
app.get('/user/:id',(req,res)=>{   // 查询某个用户的路由
})

http请求参数

请求参数的分类
1.query参数：urlencoded 形式的参数，例：?a=1&b=2。

axios({
   url:"/getdata?a=1&b=2"
})

// 以上写法等同于
axios({
   url:"/getdata",
   params:{a:1,b:2}
})

2.params参数：动态路由形式的参数，例： /1。

axios({
   url:"/detail/1",
 })

3.body参数：分为 urlencoded、json、form-data(表单数据，文字或者文件）三种形式。以json形式传递body参数如下：

axios({
   method:'post',
   url:"/login",
   data:{name:'a',psd:123456}     
})

请求参数的限制
八大请求中，只有get请求不能携带body参数，其他请求可以携带任意类型的参数。

http报文

报文类型：请求报文、响应报文。对应express路由处理函数里的参数 request 和 response 。
请求报文：客户端在发送请求时，要交给服务器的信息。
响应报文：服务器要响应客户端是信息。
报文组成：报文首行、报文头(对应请求头或响应头)、空行、报文体(对应请求体或响应体)
关于抓包：通过某种途径获取报文 ； 以下是通过浏览器获取的get和post的报文
通过netWork我们可以找到某个请求或者响应对应的报文，下面由我来带你分析
get 请求的报文

GET /?a=1&b=2 HTTP/1.1   #报文首行。可以看到，get请求的请求参数在报文首行

#报文头
Host: 127.0.0.1:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache
                      
                      #空行  (空行就是一行空的东西)
                       
                      #报文体。可以知道，get报文没有请求体

post 请求的报文

POST /getinfo HTTP/1.1     #报文首行

#报文头
Host: localhost:3000      
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded
Content-Length: 25
Origin: http://127.0.0.1:3000
Connection: keep-alive
Referer: http://127.0.0.1:3000/?a=1&b=2
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache

                          #空行

#报文体，可以看到，post请求的请求体是请求参数
usernum	"123456789"
psd	"123"

响应报文

HTTP/1.1 200 OK      # 报文首行

#报文头
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 35
ETag: W/"23-tR+4/Pk+lnFJxMj4dOIh6xp5er8"
Date: Wed, 04 Aug 2021 07:38:28 GMT
Connection: keep-alive
Keep-Alive: timeout=5

                    #空行

#报文体（服务器响应客户端的内容）
status:1
token:'dasdassad'

http状态码

状态码分类

1xx ：服务器收到请求，但没有处理。
2xx ：服务器成功响应请求。
3xx ：服务器要重定向。
4xx：服务器无法处理或者拒绝处理本次请求。
5xx ：服务器内部出错。

常见状态码

301：永久重定向，旧网址的资源不在了，地址所在服务器没了。
302：临时重定向，旧网址资源还在，客户端没有按流程办事时，临时重定向到其他页面。
304：重定向到缓存页；请求走缓存。
401：未授权。
403 ：可以简单理解为没有权限访问此站。
404：路由错误，没有该页面。
500：服务器处理出错。

http三次握手四次挥手

我们这里使用理解的来说，纯概念的话反而不好理解和记忆。
三次握手四次挥手是是浏览器与服务器沟通的一个过程。三次握手是浏览器与服务器建立tcp连接的过程，四次挥手是服务器与浏览器断开tcp连接的过程。
三次握手
1.浏览器向服务器发送建立连接的请求；
2.服务器收到请求后，回应浏览器允许建立连接；
3.浏览器收到允许后便回应服务器一起建立连接。
四次挥手
1.浏览器向服务器发出断开连接的请求；
2.服务器收到客户端断开连接的请求后，便回应浏览器还要为本次断开做一些准备工作；
3.服务器准备完毕后，就回应浏览器可以断开连接了；
4.浏览器收到允许断开的回应后，就回应服务器一起断开连接。
什么时候经历三次握手和四次挥手
当浏览器要像服务器获取数据时进行。大概的流程是这样的：
1.浏览器与服务器经过三次握手建立tcp连接。
2.服务器响应浏览器数据。
3.待浏览器完整的接收到想要的数据后，就会与服务器经过四次挥手断开连接。

http缓存

1.强缓存：下次请求直接拿缓存，不会联系服务器。
2.协商缓存：下次请求会发送请求到服务器，由服务器决定拿不拿缓存。

缓存控制字段：
http1.0通过Expries控制，值是一个GMT时间，表示该缓存的过期时间点。

res.set("Expries",Date().now()+1000*60*60)  //开启强缓存，设置过期时间为一小时

http1.1后 Expries被 Cache-Control和 Pragma替代，因此Cache-Control优先级高于Expries。

res.set("Cache-Control","max-age=3600")

Cache-Control 和 Pragma 可选值
1）public：开启强缓存，所有内容会被缓存（客户端和代理服务器。
2）private：开启强缓存，所有内容只有客户端可以缓存。
3）max-age=xxx：开启强缓存，设置缓存的有效时间为xxx。
4）no-cache：关闭强缓存，走协商缓存。
5）no-store：关闭缓存，即不强缓存也不协商缓存。

2.协商缓存流程

服务端在返回资源时会将该资源的最后更改时间通过Last-Modified字段返回给客户端。客户端下次请求时带上Last-Modified，服务端检查该时间是否与服务器的最后修改时间一致：如果一致，则返回304状态码，让浏览器取缓存；如果不一致则返回200和新的资源，并更新Last-Modified。
单纯的以修改时间来判断还是有缺陷，因此就有Etag，Etag的方式是这样：服务端在返回资源时将一个etag值返回给客户端，客户端下次请求时，服务器对该值进行对比校验：如果一致则让浏览器取缓存，Etag的优先级高于Last-Modified.

let lastmtime=12343421232   // 全局变量，记录资源最后更改的时间，当有关资源修改就会更新该值
// 如果最终修改时间一致证明资源没有修改，告诉客户端走缓存
if(req.get("if-modified-since")==lastmtime) res.status(304)  
else {res.set("Last-Modified",lastmtime); res.send("最新资源")}  // 否则返还最新资源

http和https的区别

https:是以安全为目标的 HTTP 通道。
区别
1.https 协议需要到 CA （证书颁发机构）申请证书，需要一定费用。
2.http 信息是明文传输，可以通过抓包截取到真实信息，https是加密传输。
3.http 协议的默认端口为 80，https 的默认端口为 443。
4.http 的连接很简单，是无状态的。https 握手阶段比较费时。

同源策略

概念：为了安全而实施的一个策略，协议、ip地址、端口号一致时才遵循。
如果不遵循同源策略：导致跨域。
产生的作用：不能站在自家网站拿别加网站的信息。
可以不遵循同源策略的标签：script、img、link、form、iframe、a。
作用范围：同源策略只限于服务器和浏览器之间，服务器和服务器之间发送请求交流是不受同源策略限制的。这是因为浏览器中有ajax引擎，不遵循同源策略的请求会被ajax引擎拦截。

结尾

相信看完这篇文章的小伙伴一定对http有了一个很好的了解，感谢你的观看，希望这篇文章能给你带来快乐。如果有小伙伴有一些问题或者疑惑，欢迎提出和分享。