Http协议知识点及面试总结

HTTP 常见状态码

1XX：信息状态码
100 Continue 继续。一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

2XX：成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理

3XX：重定向
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。

301和302的区别

​共同点：301和302状态码都表示重定向。
就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，
这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）。

不同点：301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址；
302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。

4XX：客户端错误
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

HTTP 常见的 header

1.请求头

Host:表示服务器主机的地址和接口，放的是ip和端口，如省略端口，则用默认端口（http是80，https是443）
Accept：客户端可识别的内容类型列表。 text/html,application/xhtml+xml
Content-Length（body中的数据长度）
一般在post请求出现，为了解决粘包问题（粘包问题：tcp无法区分应用层数据包；所以需要给包与包之间划分界限，标识数据长度），Content-Length不需要我们自己手动设置,一般都是浏览器和HTTP服务器自己计算好的
Content-Type: 表示请求的body中的数据格式
User-Agent(UA)：
UA主要包含的信息,就是 操作系统信息 和 浏览器信息
描述了用户在使用怎样的设备来上网
可以区别平板、电脑、手机设备，根据不同尺寸来调整css和js，响应式页面
Referer：表示这个页面是从哪个页面跳转过来的
Cookie：浏览器在本地存储数据(存到硬盘上)的一种机制
一般拿来存放身份信息，最常用的场景：在客户端维持登陆状态

2.响应头

Date：表示消息发送的时间，时间的描述格式由rfc822定义
server:服务器名字
Connection：浏览器与服务器之间连接的类型
content-type:表示后面的文档属于什么MIME类型
Cache-Control：控制HTTP缓存

其中Content-type值常用的有以下几种：
application/x-www-form-urlencoded：form表单类型 ，浏览器的原生form表单
application/json：序列化后的 JSON 字符串，最常用，适合 RESTful 的接口
text/xml：是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范

Cookie

1.cookie 是什么和使用场景

是服务器端保存在浏览器的一小段文本信息(字符串)，浏览器每次向服务器端发出请求，都会附带上这段信息。
使用场景：
1.对话管理：保存登录、购物车等需要记录的信息
2.个性化：保存用户的偏好，比如网页的字体大小、背景色等等
3.追踪：记录和分析用户的行为

2.cookie、sessionStorage、localStorage的区别

生命周期
cookie:可以自己设置失效时间，如果没有设置，则关闭后失效。
localStorage:除非手动清除，否则永久保存。
sessionStorage:浏览器关闭后就被清楚了。

存储大小
cookie:存储量只有4k
sessionStorage和localStorage有5M

http请求
cookie:每次http请求都带着，影响性能。
sessionStorage和localStorage只在客户端存储，不参与服务端的通信。

易用性
cookie：api需要自己封装
sessionStorage和localStorage：api简单易用
localStorage和sessionStorage倆者唯一的区别就是生命周期，localStorage可以用于页面间传递数据，sessionStorage可以用来存储临时数据

手写一个 Ajax ，分两种：XHR fetch

jQuery和axios发送的请求都是对xhr发送ajax请求的封装，而fetch是和xhr平级的ajax请求，而且fetch无需安装，是window的内置方法。

xhr发送ajax请求

	function Ajax(type, url, boolean) {
       return new Promise((resolve, reject) => {
            // 创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest()
            // 设置请求参数
            xhr.open(type, url, boolean) // type请求方式,	url:请求路径, boolean:布尔值, true: 异步, false: 同步
            //通常post请求需要设置请求头信息
            xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded')
            xhr.send() // get请求传null或空  post请求传参数
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    let data = JSON.parse(xhr.responseText)
                    resolve(data)
                }
            }
        })
    }
	
   Ajax('get', url, true).then(res => {
        console.log(res)
   })
    
   请求状态码：
   0：请求初始化（还没有调用open方法）
   1：服务器连接已建立（已调用send方法 正在发生请求）
   2：请求已接收（send方法完成，已接收到全部响应内容）
   3：请求处理中（解析响应内容）
   4：请求已完成且响应已就绪
   

fetch发送ajax请求

   // 因为fetch的返回结果包了两层Promise，
   // 所以需要两个.then()
   // 第一个.then()用于指明返回的数据格式
   // 第二个.then()可以真正的获取到响应数据。
   fetch(url,{
      //请求方法
	  method:'POST',
	  //请求头
	  headers:{},
	  //请求体
	  body:{}
   }).then(
	  response => {
	      console.log('联系服务器成功了');
	      return response.json()
	    }
	  ).then(
	    response => {console.log('获取数据成功了', response);}
	  ).catch((error) => {
	    console.log('请求出错', error);
	})

前端解决跨域

1.为什么会存在跨域问题

出于浏览器的同源策略限制。所谓同源就是两个页面具有相同的协议(protocol)、主机(host)和端口号(port)。当浏览器与后端服务器地址不一致，就会存在跨域问题。

2.解决方案
1.使用JQuery提供的jsonp

网页中添加一个script元素，向服务器请求json数据，这种做法不受同源策略的限制。服务器接收到请求后，把数据放在一个指定名字的回调函数里传递回来。

    后端收到请求，调用该回调函数，并将数据作为参数返回去，
    注意设置响应头返回文档类型，应该设置成javascript
    res.setHeader(‘content-type’, ‘application/javascript’) 

	<script>
        function JsonpCallback(data) {
              // 在这里处理后端返回来的data数据
              console.log(data);
          }
    </script>
    <script src="http://127.0.0.1:12345/jsonp/callback=JsonpCallback"></script>

2.cors 跨域资源共享（后端解决）

传说中的后端跨域！通过设置后端，来解决跨域。

	res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域的源地址是什么，可以设置为*，也可以设成你的源地址
	
	res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); // 设置返回数据类型
	
	res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST"); // 控制哪种请求是可以跨域的
	
	res.setHeader("Access-Control-Allow-Credentials", true); // 跨域的时候是否携带cookie

3.vue的反向代理跨域解决

	// vue 的开发服务器代理配置
	// vue.config.js
	module.exports = {
	  devServer: { 
	  // 配置代理服务器（帮助请求时进行跨域）
	    proxy: { 
	      "/api": { // 若请求路径以 /api 开头，认为需要走代理
	        changOrigin:true,// 开启代理
	        target: "http://dev.taobao.com", // 将其转发到 http://dev.taobao.com
	      },
	    },
	  },
	};

JWT - JSON Web Token

1.什么是JWT

JWT 是一个加密标准。是一种特定的令牌格式，基于JSON标准定义。
它由三部分组成：头部（Header）、负载（Payload）和签名（Signature），使用点号（.）进行分隔

2.JWT和Token的区别
定义和结构

令牌可以是任何形式的字符序列，没有特定的结构或标准格式。它可以由开发人员根据具体需求和应用场景进行定义和实现。

JWT:具有固定的结构和标准化的内容。头部包含描述令牌类型和算法的元数据，负载包含有关用户身份和其他相关信息，签名用于验证令牌的完整性和真实性。

使用场景：

令牌（Token）：可以在各种身份验证和授权场景中使用，包括Web应用程序、API服务、移动应用程序等。具体的令牌使用方式和场景可以根据应用需求自由定义。

JWT（JSON Web Token）：JWT通常用于无状态的身份验证和授权机制。它广泛应用于Web应用程序和API服务中，用于验证和传递用户身份信息，以及授权用户对受保护资源的访问。

3.JWT 和 cookie (Session) 的区别

基于Cookie-Session实现的用户状态管理存在的缺陷
随着用户的增加，服务端需要保存大量的session对象，为了减轻用户认证对服务器的压力
于是有了基于token的用户管理，应用最广泛的就要数基于JWT认证
它不需要服务器保存用户认证信息或者会话信息

1.存储位置
三者都是应用在web中对http无状态协议的补充，达到状态保持的目的

cookie：cookie中的信息是以键值对的形式储存在浏览器中，而且在浏览器中可以直接看到数据。

session：session存储在服务器中，然后发送一个cookie存储在浏览器中，cookie中存储的是session_id，之后每次请求服务器通过session_id可以获取对应的session信息

JWT：JWT存储在浏览器的storage或者cookie中。由服务器产生加密的json数据包括：header，payload和signature三部分组成。header中通常来说由token的生成算法和类型组成；payload中则用来保存相关的状态信息；signature部分由header，payload，secret_key三部分加密生成。 注意，不要在JWT的payload或header中放置敏感信息，除非它们是加密的。

2.优缺点

cookie:
优点：
结构简单。cookie是一种基于文本的轻量结构，包含简单的键值对。
数据持久。虽然客户端计算机上cookie的持续时间取决于客户端上的cookie过期处理和用户干预，
cookie通常是客户端上持续时间最长的数据保留形式。
缺点：
大小受到限制。大多数浏览器对 cookie 的大小有 4096 字节的限制。
非常不安全。cookie将数据裸露在浏览器中，这样大大增大了数据被盗取的风险，所有我们不应该将重要的数据放在cookie中，或者将数据加密处理。
容易被csrf攻击。可以设置csrf_token来避免攻击。

session：
优点：
session的信息存储在服务端
相比于cookie就在一定程度上加大了数据的安全性；相比于jwt方便进行管理
也就是说当用户登录和主动注销，只需要添加删除对应的session就可以，这样管理起来很方便。
缺点：
session存储在服务端，增大了服务器的开销，当用户多的情况下，服务器性能会大大降低。
因为是基于cookie来进行用户识别的, cookie如果被截获，用户就会很容易受到跨站请求伪造的攻击。
用户认证之后，服务端做认证记录，如果认证的记录被保存在内存中的话，这意味着用户下次请求还必须要请求在这台服务器上,这样才能拿到授权的资源，这样在分布式的应用上，会限制负载均衡和集群水平拓展的能力。

JWT：
优点：
因为json的通用性，jwt可以支持跨语言请求，像JAVA,JavaScript,PHP等很多语言都可以使用。
因为有了payload部分，所以JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息。
便于传输，JWT的构成非常简单，字节占用很小，所以它是非常便于传输的。
不需要在服务端保存会话信息, 利于服务器横向拓展。
缺点：
登录状态信息续签问题。比如设置token的有效期为一个小时，那么一个小时后，如果用户仍然在这个web应用上，这个时候当然不能指望用户再登录一次。目前可用的解决办法是在每次用户发出请求都返回一个新的token，前端再用这个新的token来替代旧的，这样每一次请求都会刷新token的有效期。但是这样，需要频繁的生成token。另外一种方案是判断还有多久这个token会过期，在token快要过期时，返回一个新的token。
用户主动注销。JWT并不支持用户主动退出登录，客户端在别处使用token仍然可以正常访问。为了支持注销，我的解决方案是在注销时将该token加入到服务器的redis黑名单中。

前端安全

1.浏览器安全

浏览器的同源策略：限制了来自不同源的document或脚本，对当前document读取或设置某些属性。在浏览器中scrpt、img、iframe、link等标签都可以跨域加载资源，而不受同源策略的限制.
浏览器沙箱：让不受信任的网页代码、JavaScript代码运行在一个受限制的环境中，从而保护本地桌面系统的安全。
恶意网址拦截：一个正常网页通过script或iframe等标签加载一个恶意网址。

2.跨站脚本攻击（XSS）

一种代码注入攻击，攻击者通过给目标网站注入脚本，诱导用户点击，使得脚本最终在用户的浏览器上执行。

xss攻击的主要目的是想办法获取目标攻击网站的cookie，因为有了cookie相当于有了session，
有了这些信息就可以在任意能接进互联网的PC登陆该网站，并以其他人的身份登陆做破坏。

跨站脚本攻击的类型

2.1 反射型 XSS
攻击者构造恶意的 URL，其中包含恶意脚本。当用户点击带有恶意参数的 URL 时，服务器将恶意脚本作为响应的一部分返回给用户浏览器，并在浏览器中执行。

2.2 存储型 XSS
存储型 XSS 发生在网站存储用户提交的数据，且未经过滤或转义的情况下直接在网页中显示。攻击者提交包含恶意脚本的数据，然后其他用户在访问包含该数据的页面时，恶意脚本将在他们的浏览器中执行。

2.3 DOM 型 XSS
DOM 型 XSS 是基于文档对象模型（Document Object Model，DOM）的一种 XSS 攻击。攻击者构造恶意 URL，其中包含恶意脚本。当用户点击包含恶意参数的 URL 时，恶意脚本修改页面的 DOM 结构，从而导致安全漏洞。

3.跨站点伪装请求攻击(XSRF/CSRF)

一种代码注入攻击，攻击者通过给目标网站注入脚本，诱导用户点击，使得脚本最终在用户的浏览器上执行。

指的是黑客诱导用户点击链接，打开黑客的网站，然后黑客利用用户目前的登录状态发起跨站请求。

4.SQL 注入攻击

SQL注入 攻击指的是攻击者在 HTTP 请求中注入恶意 SQL 命令，
服务器用请求参数构造数据库 SQL 命令时，恶意 SQL 被一起构造，并在数据库中执行，
以便得到数据库中的感兴趣的数据或对数据库进行读取、修改、删除、插入等敏感的操作，从而导致数据被随意篡改

项目 性能优化

从浏览器地址栏输入url到显示页面的步骤

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
2.服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
3.浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
4.载入解析到的资源文件，渲染页面，完成。

性能优化原则
1.多使用内存、缓存或其他方法
2.减少CPU计算量，减少网络加载耗时

• 让加载更快

  1.减少资源体积：压缩代码
  2.静态资源上传CDN
  3.图片懒加载
  4.路由懒加载(动态加载路由)
  

• 让渲染更快

  1.节流和防抖
  2.减少重拍和重绘
  2.js和css代码优化