一名前端对于http的必备知识

soWhat
189 阅读11分钟

http和https有什么区别

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

tips:

  • 对称性加密：加密和解密的密钥一样
  • 非对称性加密： 需要两个密钥（公钥+私钥）使用公钥进行加密的数据只有对应的私钥才能解密
  • http是超文本传输协议，浏览器利用这一协议就可以访问各种网站了。
  • ssl指Secure Sockets Layer 安全套接层，是一种保证网络数据传输安全和完整的安全协议。
  • https是在http规则的基础上又加了一层加密协议的超文本传输协议，s 指代 Secure Socket Layer 安全套接字层

http传数据大致是这样的：

http协议封装好的数据包  ->  tcp/ip   ->  服务器

缺点：数据包中途可能被窃取或者被篡改，被冒认访问

https大致流程是这样：

http协议封装好的数据包  + ssl加密   ->  tcp/ip   ->  服务器

缺点：虽然安全，但是开销变大了，传输速度也变慢了。

https步骤：

  • a. 浏览器发起https请求
  • b. 传输证书
  • c. 浏览器解析证书
  • d. 传送加密信息
  • e. 服务器解密信息
  • f. 传输加密后的信息
  • g. 浏览器解密信息

WebSocket与http协议有什么关系？

http:

http协议是非持久化的，单向的网络协议，在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。当需要即时通讯时，通过轮询方式(即在特定的时间间隔不断请求服务器，如1秒)，由浏览器向服务器发送Request请求，然后将最新的数据返回给浏览器。简单的RESTful应用程序使用HTTP协议，它是无状态的。

缺点：
会导致过多不必要的请求，浪费流量和服务器资源，每一次请求、应答，都浪费了一定的流量在相同的头部信息上

WebSocket：

webSocket解决了http协议的缺点。在webSocket中只需要服务器和浏览器通过http协议进行一个握手的动作，然后单独建立一条TCP的通信通道进行数据的传送。几乎所有的实时应用程序(如交易、监控、通知)服务都使用WebSocket在单个通信通道上接收数据。

webSocket与http相同点：

1、都是一样基于TCP的，都是可靠性传输协议。
2、都是应用层协议。

webSocket与http不同点：

1、webSocket是双向通信协议，模拟socket协议，可以双向发送或接受信息。http是单向的。
2、WebSocket是需要浏览器和服务器握手进行建立连接的。而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接。

webSocket与http的联系：

websocket在建立链接时是使用http协议的，链接一旦建立后，数据传输不需要http协议

一图以蔽之就是:

image.png

http请求要３次握手与４次挥手到底发生了什么事儿？

因为HTTP是一个基于TCP的协议,而TCP是一种可靠的传输层协议.

建立TCP连接时会发生:三次握手(three-way handshake)

  1. client> server[SYN]
  2. server> client[SYN, ACK]
  3. client> server[ACK] ？？，请说人话！！

image.png

3次握手是为了确保双方都知道对方收到了信息

关闭TCP连接时会发生:四次挥手(four-way handshake)

  1. client> server[FIN]
  2. server> client[ACK]
  3. server> client[FIN]
  4. client > server[ACK]

client等了一下没有收到server的返回，就关闭连接，server在收到client最后一句话时直接关闭连接

几个报文的标识的解释:
SYN: synchronization(同步)
ACK: acknowledgement(确认:告知已收到)
FIN: finish(结束)

http请求的get 和post有什么区别

请求方法GETPOST
参数位置url中Request body
参数长度受制于url的长度,过长的参数会丢失（理论上）无限制
参数编码ASCII 编码（理论上）无限制
后退/刷新页面不重复提交，回退无害重复提交，回退有害
安全性参数暴露在链接中，不安全相对安全
缓存可以缓存不可缓存
书签可收藏为书签（因为可以直接浏览器访问）不可收藏
历史参数保留在浏览器的历史中不会保留在浏览器历史
请求包数量1个tcp数据包 （http header+data同时发送，服务器响应200 OK）2个（先发送http header，服务器响应100 continue 后再发送body data，服务器响应200 OK）

前端请求跨域的解决方法

  • 使用反向代理，将第三方的接口地址映射成本地的地址，前端只要调用本地的地址，就可以请求到第三方的数据了，比如，nginx提供的反向代理服务就很稳定，只要修改下nginx.conf文件就可以，
# 如后端api接口都通过gateway/进行访问,则nginx的配置如下
# 当本地访问localhost[:port]/gateway/xxx的时候，请求便会被代理到
# https://182.xxx.xxx.xxx:xxx/gateway/地址，实现同域访问

location /gateway/ {
   proxy_pass https://182.xxx.xxx.xxx:xxx/gateway/;// 远程地址
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";
}
  • 修改浏览器配置，如chrome  --disable-web-security--user-data-dir （不推荐）
  • 使用jsonp 设置dataType: 'jsonp'，但只支持get请求（不完美）
  • CORS ，可以在服务端增加一个响应头Access-Control-Allow-Origin来告诉浏览器支持获取就可以了（需要服务端配合），参考：
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略，通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。
设置方法：
response.setHeader("Access-Control-Allow-Origin", "*"); // 支持所有域名访问资源
response.setHeader("Access-Control-Allow-Origin", "https://182.xxx.xxx.xxx:xxx/");
//支持指定域名地址访问
  • 在nginx配置文件里面设置add_header ,参考：
      location / {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            etag off;
            add_header Cache-Control "no-cache, no-store";
            proxy_pass http://localhost:[port]; #port为本地服务端口
        }

http2 的多路复用了解一下

  • HTTP2 采用二进制格式传输，取代了 HTTP1.x 的文本格式，二进制格式解析更高效。
  • 多路复用代替了 HTTP1.x 的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。
  • 在 HTTP1.x 中，并发多个请求需要多个 TCP 连接，浏览器为了控制资源会有 6-8 个 TCP 连接都限制。
  • HTTP2 中同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。
  • 单个连接上可以并行交错的请求和响应，之间互不干扰
  • 对Header头压缩，传输体积小
  • 服务端推送，服务端能够更快的把资源推送给客户端

优势：

  1. 降低服务器压力
  2. 提升网站访问速度
  3. 保护网站安全

常见的HTTP状态码

http状态码（HTTP Status Code）是用以表示网页服务器超文本传输协议响应状态的3位数字代码，分为几类：消息（10x）、成功（20x）、重定向（30x）、请求错误（4xx）、服务器错误（5xx/6xx） 大多数情况看到5字头前端可以甩锅了🤭，常用的有以下：

状态码含义解释
100Continue此状态用于通知客户端请求已收到一部分，还没拒绝，你可以继续发，如前文所说的post请求过程中
200OK服务器已成功处理了请求。 通常表示服务器提供了请求的网页/内容
201Created请求成功并且服务器创建了新的资源
202Accepted服务器已接受请求，但尚未处理
203Non-Authoritative Information 服务器已成功处理了请求，但返回的信息可能来自另一来源
204No Content服务器成功处理了请求，但没有返回任何内容
205Reset Content充值内容
206Partial Content服务器成功处理了部分get请求
300Multiple Choices针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择
301Moved Permanently请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302Move Temporarily服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303See Other请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304Not Modified自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 浏览器缓存策略中会使用此状态码
305Use Proxy请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。 
307Temporary Redirect服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
400Bad Request服务器不理解请求的语法
401Unauthorized请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应
403Forbidden服务器拒绝请求，通常用于未授权访问
404Not Found（最常见）服务器找不到请求的网页
405Method Not Allowed禁用请求中指定的方法，如后端用POST,前端用了GET
406Not Acceptable无法使用请求的内容特性响应请求的网页
407Proxy Authentication Required此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理
408Request Timeout服务器等候请求时发生超时
409Conflict服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息
410Gone如果请求的资源已永久删除，服务器就会返回此响应
411Length Required服务器不接受不含有效内容长度标头字段的请求
412Precondition Failed服务器未满足请求者在请求中设置的其中一个前提条件
413Request Entity Too Large服务器无法处理请求，因为请求实体过大，超出服务器的处理能力
414Request-URI Too Long请求的 URI（通常为网址）过长，服务器无法处理
415Unsupported Media Type请求的格式不受请求页面的支持
416Requested Range Not Satisfiable如果页面无法提供请求的范围，则服务器会返回此状态代码
417Expectation Failed服务器未满足"期望"请求标头字段的要求
500Internal Server Error服务器遇到错误，无法完成请求
501Not Implemented服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码
502Bad Gateway服务器作为网关或代理，从上游服务器收到无效响应
503Service Unavailable服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态
504Gateway Timeout服务器作为网关或代理，但是没有及时从上游服务器收到请求
505HTTP Version Not Supported服务器不支持请求中所用的 HTTP 协议版本
600Unparseable Response Headers源站没有返回响应头部，只返回实体内容
avatar
文章
阅读
粉丝