继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

HTTP知识点(前端需掌握)

蝴蝶刀刀
关注TA
已关注
手记 347
粉丝 37
获赞 183

1.五层因特网协议栈

应用层

应用层决定了向用户提供应用服务时通信的活动,应用进程间的通信和交互的规则。如HTTP协议,域名系统DNS,文件传输协议FTP,电子邮件协议SMTP。

域名系统DNS:负责解析域名,提供域名到IP地址之间的解析服务。

HTTP协议:超文本传输协议,是互联网应用最广泛的网络协议,所有的万维网(wwww)文件都必须遵守这个标准。

 

传输层

提供处于网络连接中的两台计算机之间的数据传输,会传输应用层的相关报文。其中有两个不同性质的协议TCP和UDP

TCP:提供面向连接的,提供可靠的字节流服务(为了方便传输,把大块数据分割成以报文为单位的数据包,进行管理)。提供全双工通信,首部有20个字节

三次握手:为了准确无误的将数据包送到目的处,会采用三次握手策略。发送端首先会发送一个带有SYN标志的数据包给对方,对方接收后,会回传一个带有SYN/ACK标志的数据包,表达确认信息。发送端在回传一个带有ACK标志的数据包,表示结束。如果某一个阶段莫名其妙的中断,TCP会按照相同的顺序继续发送相同的数据包。

 

UDP:无连接的,面向报文的,尽最大可能的交付,不保证可靠支付,没有拥塞控制,支持一对一,一对多,多对一,多对多的交互通信,首部开销小只有8个字节

 

网络层(网络互连层)

处理网络上流动的数据包,规定通过怎么样的路劲(传输路线)达到接收方主机,并把数据包传给对方

 

数据链路层

来处理连接网络的硬件部分。包括控制操作系统,硬件的设备驱动等,硬件上的范畴都在链路层的范围内。

 

物理层

物理层上传输的单位是比特,实现相邻计算机节点之间比特流的透明传输,尽肯能屏蔽具体传输介质和物理设备的差异。

 

OSI 七层协议模型

应用层 => 表示层 => 会话层 => 传输层 => 网络层 => 数据链路层 =>物理层

 

TCP/IP四层模型

应用层 => 传输层 => 网络层 => 数据链路层

 

各层对应图例

 HTTP和HTTPS的区别

协议:

HTTP:运行在TCP上,明文传输,客户端和服务端都无法验证对方的身份。

HTTPS:运行在SSL(安全套接层)上,SSL运行在TCP上,添加了加密和认证机制。

 

端口:

HTTP:80

HTTPS:443

 

资源消耗:

HTTP:较少

HTTPS:由于有加密操作会更多的消耗CUP和内存资源。

 

开销:

HTTP:无需证书。

HTTPS:需要证书,证书一般要向认证机构购买。

 

加密机制:

HTTP:无

HTTPS:共享密钥加密和公开密钥加密并且用的是混合加密机制

 

安全性:

HTTP:弱

HTTPS:强

 

对称加密和非对称加密

对称加密:加密和解密都使用同一个密钥,存在的问题是密钥如何发送给对方。

非对称加密:加密用公钥和私钥,公钥可以随便发布,私钥只有自己有。发送的密文用公钥加密,接受方用私钥解密,相对于安全,但是速度慢。

 

 HTTP2

HTTP1:浏览器中限制了同一个域名下的请求数量(Chrome一般6个),请求很多资源的时候,要等前6个请求后才会发送请求。

HTTP2:引用了多路复用技术,通过一个TCP连接可以传输所有的请求数量。可以不受同一个域名下请求数量的问题。

 

跨域

原因:因为浏览器的同源策略(协议,域名,端口)

不受同源策略限制的标签: <script> <img> <iframe> <link> 有src属性 可以加载跨域资源。

解决方案:

1. JSONP

 利用script标签的src属性,指向一个访问的地址并提供一个callback来接收数据。相对于简单,只能支持get方式。(在head标签动态添加script标签,success帮window随机起名字)

?


function jsonp(url, jsonpCallback, success) {  let script = document.createElement('script')  script.src = url  script.async = true  script.type = 'text/javascript'  window[jsonpCallback] = function(data) {    success && success(data)  }  document.body.appendChild(script)}jsonp('http://xxx', 'callback', function(value) {  console.log(value)})

2.CORS (跨域资源共享)

需要浏览器和后端同时支持,浏览器自动进行cors通信,主要是后端服务器要设置 Access-Control-Allow-Origin ,就可以开启cors ,这个属性表示允许哪些哪些域名可以访问资源,假如设置成通配符,所有网站都可以访问资源。

3.nginx 代理

利用nginx实现反向代理

复制代码

server {
    listen 8080;                         # 监听的端口
    server_name  192.168.1.1;            # 配置访问域名
    root  /data/toor;                    # 站点根目录
    error_page 502 404 /page/404.html;   # 错误页面
    location ^~ /api/  {                        # 使用 /api/ 代理 proxy_pass 的值
        proxy_pass http://192.168.20.1:8080;    # 被代理的应用服务器 HTTP 地址    }
}

复制代码

Vue中用proxyTable

复制代码

proxyTable: {    '/weixin': {
        target: 'http://192.168.48.11:8100/', // 接口的域名 
        secure: false,      // 如果是 https 接口,需要配置这个参数
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置        pathRewrite: {            '^/weixin': ''
        }
    },
},

复制代码

原生vue

复制代码

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'}).then((res) => {
    console.log(res); 
})

复制代码

4. document.domain + iframe 跨域

5. webSocket 协议跨域

6. node 中间件代理跨域

7. postMessage跨域

8. window.name + iframe跨域

9. location.hash + iframe跨域

跨域方式详解(https://segmentfault.com/a/1190000011145364)

常见状态码:

1XX:临时响应并表示请求者继续执行操作

100:继续操作

101:切换协议,请求者要求服务器更换协议,服务器已经确认并准备切换

2XX:成功

200:服务器已经成功处理了请求

204:服务器已经成功处理了请求,但是没有返回任何内容

206:服务器成功处理了部分get请求(有范围限制)

3XX:重定向

301:永久重定向 请求的网页已经移动到新位置

302:临时重定向 请求的网页临时定位到其他位置了

303:查看其他的位置 和302有相同的功能但是303明确要求使用get方法获取资源

304:未修改 从上次请求的网页未修改过,可以直接用客户端没有过期的缓存

305:使用代理 请求者只能使用代理访问请求的网页

307:临时重定向 和302类似 不会成post变成get

4XX:请求错误

400:服务器不理解请求的语法,语法错误(可能后台未部署)

401:未授权 要求身份验证

404:禁止 不允许访问该资源

404:未找到 服务器找不到请求的网页

405:方法禁用 禁用请求中使用的方法

5XX:服务器错误

500:服务器内部错误

501:尚未实施 服务器尚不具备请求功能

502:错误网关 服务器作为网关或者代理,从上游服务器收到无效响应

503:服务不可用 服务器停机维护或超载 暂时状态

504:网关超时 服务器作为网关或者代理。没有及时从上游服务器收到请求

更详细请移步(https://www.cnblogs.com/lgp2000/p/6874554.html)

从地址栏输入url到页面加载完成,发生了什么?

1. 从浏览器的地址栏输入URL并按下回车

2. 浏览器查找当前url是否存在缓存,并比较缓存是否过期

3. NDS解析URL对应的IP

4. 根据IP地址建立TCP链接

5. HTTP发送请求

6. 服务器处理请求,浏览器接收HTTP响应

7. 渲染页面,构建DOM树

8. 关闭TCP链接

缓存:HTTP缓存有很多种规则,根据是否需要重新向服务器发起请求来分类。会有强制缓存和对比缓存。

强制缓存判断HTTP首部字段 cache-control Expires

Expires:是绝对时间,即服务器时间。如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题:服务器时间与客户端时间可能不一致。因此该字段已经很少使用。

cache-control中的max-age保存一个相对时间。例如Cache-Control: max-age = 484200,表示浏览器收到文件后,缓存在484200s内均有效。 如果同时存在cache-control和Expires,浏览器总是优先使用cache-control。

对比缓存通过HTTP的last-modified,Etag字段进行判断。

last-modified是第一次请求资源时,服务器返回的字段,表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较,如果不一致则认为缓存已过期并返回新资源给浏览器;如果时间一致则发送304状态码,让浏览器继续使用缓存。

Etag:资源的实体标识(哈希字符串),当资源内容更新时,Etag会改变。服务器会判断Etag是否发生变化,如果变化则返回新资源,否则返回304。

 TCP 四次挥手,关闭连接

关闭连接需要发送四个包

 

作者:xiaxuening

原文出处:https://www.cnblogs.com/xiaxuening/p/10485879.html  

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP