了解HTTP

68 阅读4分钟

HTTP协议的特点

HTTP协议的特点.jpg

HTTP协议的发展

HTTP协议的发展.jpg

HTTP/2

HTTP2.jpg

HTTP/2比HTTP/1更快更稳定更简单的原因:从整个文本传输到分割成一个个帧并用二进制编码的的形式进行传输,同时加入了一些压缩算法使传输效率更高一些。

消息和数据流

消息和数据流.jpg

响应消息:就包含响应头、响应体

建立连接,连接里有很多个双向字节流。

传输的最小单位是帧,而帧是可以交错发送的。因为帧里边会有一些标记信息,而接收方会将这些帧里边的标记信息组织起来就可以得到完整的消息。

HTTP2特性

HTTP2特性.jpg

HTTPS

HTTPS.jpg

HTTP常见请求

HTTP常见请求.jpg

安全的请求方法

安全的请求方法.jpg

状态码

状态码.jpg

RESTful API

RESTful API.jpg

常用请求头

常用请求头.jpg

常用响应头

常用响应头.jpg

缓存

缓存.jpg

协商缓存:浏览器与服务器之间进行通信以确认缓存资源是否仍然有效的过程。

浏览器缓存流程

浏览器缓存流程.jpg

cookie

cookie.jpg

场景分析

cache:缓存

登录场景分析:

登录场景分析.jpg

怎么确保登录后用户刷新界面还是登录状态?

怎么确保用户尽可能快地拿到的静态资源?

怎么确保用户拿到的静态资源足够新?

静态资源

静态资源请求举例:

静态资源请求举例.jpg

应用场景:用CDN可以使用户尽可能快地拿到的静态资源;而怎么确保用户拿到的静态资源够新?

更新了.css文件,但浏览器的强缓存有效期为1年,怎么确保用户刷新页面后页面会用新的.css文件?

方法:对.css文件名做更改,加上一些hash值

静态资源方案.jpg

跨域

跨域,指的是从一个域名去请求另外一个域名的资源,即跨域名请求。跨域时,浏览器不能执行其他域名网站的脚本,这是由浏览器的同源策略造成的,是浏览器施加的安全限制, 跨域限制访问,其实是浏览器的限制

同源策略浏览器最核心也最基本的安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源 ,这是一个用于隔离潜在恶意文件的重要安全机制。所以跨域问题只在浏览器中出现,如果客户端是APP的话,那跨域问题就不存在了。 PS:IE端口除外,IE对同源策略的定义有略微的不同。

同源是指:协议、域名,端口,【scheme(协议)、host name(主机名/域名)、port(端口号)】相同,即两个资源具有相同的。 只要三者之间有一个不同,就是cross-origin跨域(跨源)。

非同源限制

只针对AJAX请求跨域

  1. 无法读取非同源网页的 CookieLocalStorageIndexedDB
  2. 无法对非同源网页的 DOMJS对象进行操作
  3. 无法向非同源地址发送 AJAX请求

跨域解决方案:

跨域解决方案.jpg

CORS

预请求.jpg

http默认端口号为80;https默认端口号为443

跨域的举例.jpg

预请求method: OPTIONS 大部分跨域场景会发起预请求,因为只有复杂请求才会发起跨域请求。请求可以大致分为简单请求和复杂请求。

代理服务器

将代理服务器和当前地址部署到同一个域下,就没有跨域问题了

代理服务器2.jpg

iframe

较不常见

鉴权

怎么确保登录后用户刷新界面还是登录状态

Session+cookie

鉴权方案1.jpg

过程:

登录成功后会发起一个提交的请求,把当前信息提交给Serve服务器,服务器收到后会验证信息的正确性,如果正确,服务器会生成一个session并存储起来,并在此次请求的响应中,服务器会借由set-cookie生成一个seesion 的cookie,放到相同域的下面。下一次浏览器再访问,会自动携带该session的cookie,服务器根据该cookie就跨域正确识别信息了。

JWT

JWT.jpg

过程:

统一提交请求后,服务器会生成一个token(token有一些约定的格式),服务器不会存储token,而是放到响应里返回给浏览器;浏览器下一次请求的话会带着token,提交给服务器,服务器会对token解析验证并返回给浏览器。

JWT优点:token的唯一性。

SSO

SSO.jpg

Ajax

Fetch

Fetch特点:

XMLHttpRequet的升级版使用Promise模块化设计,Response,Request, Header对通过数据流处理对象,支持分块读取

axios

常用的请求库:axios·支持浏览器、nodejs环境·丰富的拦截器

网络优化

网络稳定性

网络优化.jpg

网络稳定性.jpg

扩展

WebSocket:

WebSocket.jpg

QUIC:

QUIC.jpg