前端面试知识点_HTTP

最新推荐文章于 2022-06-04 17:35:49 发布

V1RusCz

最新推荐文章于 2022-06-04 17:35:49 发布

阅读量307

点赞数

分类专栏：前端面试知识点文章标签： http 前端

本文链接：https://blog.csdn.net/VIRUSESCZ/article/details/124146267

版权

前端面试知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

仅用于个人学习总结，有不足还请指出。

1.概念

HTTP（超文本传输协议）是应用层协议，用于从WWW服务器传输超文本到本地浏览器。
HTTP URL 包括用于查找某资源的详细信息：

http://www.csdn.net:8080/news/index.html?id=1&page=1#name

1.协议部分：http
2.域名：www.csdn.net
3.端口：8080
4.虚拟目录：域名后的第一个‘/’到最后一个’/‘之间的部分：/news/
5.文件名：index.html
6.参数部分：’?‘开始到’#'部分：id=1&page=1（非必须）
7锚:‘#’开始到结束：name（非必须）

2.报文

1.请求报文(Request)

请求报文格式如下：
在这里插入图片描述

分为四个部分：请求行，请求头，空行，请求正文，例子：

POST / HTTP1.1
Host:www.csdn.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley

请求行

用于定义本次请求的请求方法，请求地址以及HTTP协议版本

GET /example.html HTTP/1.1 (CRLF)

请求方法：
GET：请求获取Request-URI所标识的资源(无请求正文)
POST：在Request-URI所标识的资源后增加新的数据（有请求正文）
HEAD：请求获取由Request-URI所标识的资源的响应消息报头
PUT：请求服务器存储或修改一个资源，并用Request-URI作为其标识
DELETE：请求服务器删除Request-URI所标识的资源
TRACE：请求服务器回送收到的请求信息，主要用于测试或诊断
OPTIONS：请求查询服务器的性能，或者查询与资源相关的选项和需求

请求头

由一系列键值对组成，用于说明服务器要使用的附加信息

:authority: www.google.com.hk    # 请求的域名（对方的服务器地址）
:method: GET                     # 请求方法，一般浏览器访问网站使用GET请求                     
:path: /?gws_rd=ssl              # 请求路径，也就是 https://ww.google.com.hk/ 后面的内容
:scheme: https                   # 请求的协议，这里使用https协议（使用SSL加密的http协议）
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng响应头,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
# 请求文件类型，可以吧这里的文件类型Google一下，因为篇幅太长这里就不做详细介绍了（如text/html是文档/HTML文档的意思）
accept-encoding: gzip, deflate, br  # 压缩类型，支援gzip,deflate,br 压缩方式
accept-language: zh-HK,zh;q=0.9  # 浏览器语言，我的默认语言是 zh-hk （中国-香港）
cache-control: no-cache          # 缓存讯息，这里是 不缓存（no-cache）
pragma: no-cache                 # 缓存来源
sec-fetch-dest: document         # sec-fetch-* 意为如何使用返回的参数
sec-fetch-mode: navigate
sec-fetch-site: same-origin
sec-fetch-user: ?1
upgrade-insecure-requests: 1     # 不用在意这个东西
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36 Edg/86.0.622.63
# 非常重要的浏览器UA，表明了浏览器的身份：是什么内核，运行在什么系统上
content-encoding: gzip  # 压缩使用Gzip压缩
content-length: 67582   #  HTTP消息长度 67582
content-type: text/html; charset=UTF-8  # 返回文件类型 text/html ，字符编码为 UTF-8
date: Tue, 10 Nov 2020 01:06:54 GMT   # 服务器的时间
server: gws  # 服务器名，这个其实可以自定义，一般用于标示自己用的是什么web服务器
set-cookie: 1P_JAR=2020-11-10-01; expires=Thu, 10-Dec-2020 01:06:54 GMT; path=/; domain=.google.com.hk; Secure; SameSite=none
set-cookie: NID=204=Zl-c80ku7NgAF7VKJt84n2Z4DGob3kh9RCnBCaf21NgeIKVA7GsixU8st4FdJvPODEnS_EYoXKbPOrdhxKI_Si4k2PeLInLNoE5KNlBC1DKyZHP1z0GLesmx8sN-H4hFUe3cvrUDJMyUTq6rTyG8DL4X-rRLcgn1Iy32UlaxFDo; expires=Wed, 12-May-2021 01:06:54 GMT; path=/; domain=.google.com.hk; Secure; HttpOnly; SameSite=none
# set-cookie 是给予cookie
status: 200  # 状态码，非必要
strict-transport-security: max-age=31536000
x-frame-options: SAMEORIGIN
x-xss-protection: 0

请求正文

发送POST请求时才会有请求正文，请求发送的数据

2.响应报文(Response)

响应报文格式如下：
在这里插入图片描述
分为四个部分：响应行，响应头，空行，响应体，例子：

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8

<html>
      <head></head>
      <body>
            <!--body goes here-->
      </body>
</html>

响应行

用于定义本次响应的HTTP协议版本，状态码以及文本描述

HTTP/1.1 200 OK

状态码一般由三位数字组成，第一个数字代表响应类别，共五类：
1xx：指示信息–表示请求已接收，继续处理

2xx：成功–表示请求已被成功接收、理解、接受

3xx：重定向–要完成请求必须进行更进一步的操作

4xx：客户端错误–请求有语法错误或请求无法实现

5xx：服务器端错误–服务器未能实现合法的请求
常见状态码：

200 OK                        //客户端请求成功
400 Bad Request               //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized              //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden                 //服务器收到请求，但是拒绝提供服务
404 Not Found                 //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error     //服务器发生不可预期的错误
503 Server Unavailable        //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

响应头

与HTTP请求头类似，包括一些列键值对用于说明服务器的一些附加信息。

响应体

响应体式服务器根据客户端的请求返回给客户端的具体数据。

PPPPSSSS：请求报文和响应报文中的空行作用相同，即标注头部的结束。

3.特点

1.客户/服务器模式
2.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
3.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
4.非持久连接:HTTP1.0每进行一次通信就要断开TCP链接，下次再重新建立TCP链接。HTTP1.1的每次TCP连接可以传送多个HTTP请求和响应（解决了非持久链接的问题）。
5.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

4.其他

4.1 HTTP2.0在HTTP1.1上的改进

1、二进制分帧： HTTP1.1是通过文本的方式传输数据，表现形式具有多样性，而二进制只有0和1两种状态，实现方便且稳定；
2、首部压缩： HTTP1.*中header中带有大量信息（特别是包括cookie时），每次都需要重复发送；HTTP2.0采用头部压缩算法对传输的header进行编码，并在客户端和服务端维护一张索引表来记录出现过的header，后面在传输过程中就可以传输已经记录过的header的键名，对端收到数据后就可以通过键名找到对应的值。
3、多路复用： HTTP1.1虽然支持并发多个请求，但页面需要请求很多资源时，队头阻塞会导致在达到最大请求时，会阻碍排在后面的请求；HTTP2.0可以同时处理多个消息请求和响应，甚至交错发送数据，避免了队头阻塞问题，提高了传输性能。
4、服务器推送： HTTP1.1中，一个客户端的请求对应一个响应。在HTTP2.0中，服务器可以对一个客户端的请求发送多个响应。如果一个请求是由你的主页发送的，服务器可能会响应主页内容、logo以及样式表，因为他知道客户端会用到这些东西。这样不但减轻了数据传送冗余步骤，也加快了页面响应的速度，提高了用户体验。

4.2 HTTPS

HTTP的不足

通信使用明文(不加密),内容可能会被窃听
不验证通信方的身份,因此有可能遭遇伪装
无法证明报文的完整性,所以有可能已遭篡改

针对这些缺点，人们提出了HTTPS（HTTPS = HTTP +加密 +认证 +完整性保护）

原理

HTTPS即 HTTP 下加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

客户端使用 https url 访问服务器，则要求 web 服务器建立SSL链接
web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥+数字签名），传输给客户端。
客户端使用数字认证机构的公开密钥验证数字签名，从而验证服务器公开密钥的真实性
客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
web 服务器通过自己的私钥解密出会话密钥。
web 服务器通过会话密钥加密与客户端之间的通信。

区别

http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
http 协议的默认端口为 80，https 的默认端口为 443。
http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
https 缓存不如 http 高效，会增加数据开销。
Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名。

4.3 HTTP跨域请求问题

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。
跨域原理，即是通过各种方式，避开浏览器的安全限制。

同源策略类别

DOM 同源策略：禁止对不同源页面的 Dom 元素进行操作，主要是在 iframe 标签加载跨域页面出现。
XMLHttpRequest 同源策略：禁止使用 XHR 对象对不同源地址发起请求。
存储在浏览器中的数据，如localStroage、Cooke和IndexedDB不能通过脚本跨域访问

解决方案：JSONP

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

//动态创建 script
var script = document.createElement('script');
// 设置回调函数
function getData(data) {
    console.log(data);
}
//设置 script 的 src 属性，并设置请求地址
script.src = 'http://localhost:3000/?callback=getData';

// 让 script 生效
document.body.appendChild(script);

缺点：JSONP 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据

4.4 Session和Cookie的区别

！！！cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。

Cookie工作原理：

客户端第一次发送请求给服务器端；
服务端创建Cookie（包含用户的信息，对应一个识别码）并将其发送给客户端，客户端会保存cookie文件；
客户端再次访问服务端时，会自动在请求报文中加入Cookie值发送给服务端；
服务端接受到报文后，通过Cookie值就能确认用户身份。

Session工作原理：

客户端第一次访问服务端；
服务端创建一个sessionId和session形成一个映射关系，session保存在后端数据库，然后将sessionId发送给客户端并保存；
客户端再次访问服务端时，会自动在请求报文的首部行中加入sessionId；
服务端根据sessionId去查询Session对象，从而区分不同用户。

Session&Cookie区别：

Cookie数据存放在客户端上，Session数据存放在服务器上；
Cookie不是很安全，攻击者可以分析客户端本地的Cookie进行身份伪装，考虑到安全可以使用Session。
单个Cookie在客户端的数据大小限制为4k，session过多时会消耗服务器资源

Cookie&sessionStorage&localStorage区别：

cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地