Http协议相关知识

一、OSI五层网络模型

	OSI五层网络模型
应用层	为应用软件提供了很多服务，构建于协议之上	http、ftp协议
传输层	数据的传输都是在这层定义的，数据过大分包，分片	TCP、UDP(建立端到端服务)
网络层	为数据在节点之间传输创建逻辑链路	为网络上的不同主机提供通信
数据链路层	为通讯实体间建立数据链路连接	传输以帧为单位的数据
物理层	主要作用是定义物理设备如何传输数据	光缆，网线

---

二、三次握手

• 客户端发起建立连接请求，携带SYN包。
• 服务端接收到连接请求，并发出SYN包与ACK确认包。(确认客户端发送能力)
• 客户端收到请求，返回ACK确认包。(确认客户端接收能力，确认服务端收、发能力)。
• 为什么是三次握手？
  以最快的效率确认双方具有收发能力并建立稳定连接(保证可靠传输)。

三、常见请求方法与常用code

1. 见请求方法

方法	描述
GET	发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。
POST	和get一样很常见，向服务器提交资源让服务器处理，比如提交表单、上传文件等
OPTION	获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。
PUT	和post类似，html表单不支持，发送资源与服务器，并存储在服务器指定位置，要求客户端事先知道该位置比如post是在一个集合上（/province），而put是具体某一个资源上（/province/123）。所以put是安全的，无论请求多少次，都是在123上更改，而post可能请求几次创建了几次资
DELETE	请求服务器删除某资源。和put都具有破坏性，可能被防火墙拦截。如果是https协议，则无需担心。
HEAD	质和get一样，但是响应中没有呈现数据，而是http的头信息，主要用来检查资源或超链接的有效性或是否可以可达、检查网页是否被串改或更新，获取头信息等，特别适用在有限的网速下。
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。就是把服务器作为跳板，去访问其他网页然后把数据返回回来，连接成功后，就可以正常的get、post了。

2. 常用CODE

• 101 协议切换，从一种协议切换到另一种协议 ws (webSocket建立连接）

2xx开头 （请求成功）表示成功处理了请求的状态代码。

• 200 OK 请求成功。一般用于GET与POST请求

• 201 Created 已创建。成功请求并创建了新的资源

• 202 Accepted 已接受。已经接受请求，但未处理完成

• 204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

• 205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

3xx 开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。*

• 301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

• 302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

• 303 See Other 查看其它地址。与301类似。使用GET和POST请求查看

• 304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

• 305 Use Proxy 使用代理。所请求的资源必须通过代理访问

• 307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向

4xx开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

• 400 Bad Request 客户端请求的语法错误，服务器无法理解

• 401 Unauthorized 请求要求用户的身份认证

• 403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

• 404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

5xx开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

• 500 Internal Server Error 服务器内部错误，无法完成请求

• 501 Not Implemented 服务器不支持请求的功能，无法完成请求

• 502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

• 503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

• 504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

• 505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理

四、跨域同源策略

（同源策略主要针对域名host，端口号port，http协议版本）通俗来讲，因为安全原因 服务器只允许浏览器在本域下的文档资源，若非本域访问，则会产生跨域。
解决方案

1. cors跨域
2. jsonp跨域
3. 代理请求

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

• 普通跨域请求：只需服务器端设置Access-Control-Allow-XXXX 请求头即可
• 带cookie跨域请求：前后端都需要进行设置

CORS跨域请求限制

• 只有GET，HEAD，POST可以直接访问，其它请求方法需要发送option预请求
• 只有Content-Type为text/plain、multipart/form-data、application/x-www-form-urlencoded三种，其它type需要发送option预请求
• 只支持部分请求头，部分不允许的头需要发送预请求确认
• Access-Control-Allow-Origin || Access-Control-Allow-Headers || Access-Control-Allow-Methods || Access-Control-Allow-Max-Age

let http = require('http');
http.createServer((req,res)=>{
    res.writeHead(200,{
        "Content-Type":"text/plain",
        "Access-Control-Allow-Origin":"http://localhost:1111",
        //"Access-Control-Allow-Origin":"*"
    });
    res.end("这是服务器2中的文本")
}).listen(2222);
///挂载到http://localhost:2222 
console.log("success port2222");

Access-Control-Allow-Origin值有两种配置方式，* 代表允许所有域，填写特定域名则可放行特定域

获取成功，解决跨域。

3. JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。其原理是利用script标签不受同源策略的限制，可以自由加载各类文件的特点去实现的；

请求配置

    //创建一个script标签
    let scriptTag = document.createElement("script");
    //注入请求地址  可带参数
    scriptTag.src = "http://localhost:2222/?callback=callback";
    //将创建script标签放入head中 发送请求
    document.querySelector('head').appendChild(scriptTag);
    //回调函数
    function callback(res) {
        console.log(res)
    }

服务端配置

let http = require('http');
let url = require('url');
let querystring = require('querystring');
//导入url querystring模块，解析请求参数
http.createServer((req,res)=>{
    //获取参数
    let query = querystring.parse(url.parse(req.url).query);
    //回调函数名称
    let callback = query.callback;
    console.log(callback);
    res.writeHead(200,{
        //返回数据格式一定要为js
        "Content-Type":"text/javascript;charset=UTF-8"
    });
    let data = { //定义返回数据
        code:200,
        msg:"这是一段文字！"
    };
    //发送数据包
    res.end(`${callback}(${JSON.stringify(data)})`)
}).listen(2222);
console.log("success 2222");

请求成功，callback函数调用成功
JSONP实际上就是前端页面通过创建script标签形成跨域请求，并在页面中编写回调函数并将函数名传递给后端，等待后端响应，以 func(传参)；调用的方式将数据通过js的方式返回到创建的script标签中，而返回数据被浏览器编译为js代码，到达页面后立即调用回调函数完成请求；

五、浏览器缓存

1. 缓存控制头：Catch-Control:

常用值	描述
public	所有内容都将被缓存(客户端和代理服务器都可缓存)
private	内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache	必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
max-age=1000（s）	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

2. 协商缓存

1. 服务器写入Last-Modifide，客户端通过If-Modifide-Since头携带值验证是否需要更新
2. Etag数据签名，服务器对资源给定签名(如hash)，当资源改变时修改签名，通过写入Etag头发送到客户端，客户端通过If-None-Match头携带值验证是否需要更新
3. response Code返回304即可读取缓存
   

六、Cookie & Session & localstroge

什么是Cookie？

Cookie是一段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
1. cookie常用属性

属性名	描述
name	一个cookie的名称
value	一个cookie的值
domain	可以访问此cookie的域名
path	可以访问此cookie的页面路径
Size	此cookie大小
http	cookie的httponly属性，若此属性为True，则只有在http请求头中会有此cookie信息，而不能通过document.cookie来访问此cookie。
Max-Age	设置cookie超时时间。如果设置的值为一个时间，则当到达该时间时此cookie失效。不设置的话默认是session，意思是cookie会和session一起失效，当浏览器关闭（并不是浏览器标签关闭，而是整个浏览器关闭）后，cookie失效。（时间戳格式）
expires	过期时间（标准时间GMT格式）
secure	设置是否只能通过https来传递此条cookie

2 .cookies注意点
4. 不设置过期时间，浏览器关闭则清空
5. 每个cookie最大4k
6. 每个域最多存放20-60个
7. max-age优先级 大于 expires
8. 所有请求，包括静态资源访问，都会携带cookie

什么是localstroge？

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

• 同域下，缓存数据才可以互通。
• 不主动清除会一直存在。
• localStorage.setItem(“lastname”, “Smith”); // get clear
• localStorage最大存储数据量为5m
• 存储数据类型为纯string与cookie相同

什么是Cookie？

七、keep-alive长连接

传统的Http应用里都是一次TCP连接一次request，导致频繁的建立与断开tcp连接，多次握手，效率非常低，在http1.1中增加了connection:keep-alive属性，让http请求可以复用，两个请求可以使用同一个tcp连接，提高了传送效率。

9. chrome最多建立6个tcp请求
10. http1.1支持keep-alive
11. 一个tcp连接可以传输多个http请求
12. http2.0支持请求并发，所有请求可在同一个请求中并发传送。

八、浏览器优化

1. 使用的图片，资源进行懒加载。
2. http请求使用g-zip数据压缩。
3. 使用cdn服务器，加快资源加载速率。
4. 减少cookie使用，所有同域请求都会携带cookie。
5. 合并请求，减少请求数量。
6. 使用浏览器缓存，配置协商缓存。
7. 接口节流，避免请求并发。