前端开发需要了解的网络基础

史努比的大头

于 2024-09-18 09:12:14 发布

阅读量712

点赞数 17

文章标签：前端

本文链接：https://blog.csdn.net/qq_45937484/article/details/142127579

版权

常见的http请求方式

GET：从服务器获取数据，参数通常在 URL 中传递。
POST：向服务器发送数据，通常用于创建或更新资源，数据在请求体中传递。
PUT：更新现有资源，通常需要提供完整的资源数据。
PATCH：部分更新资源，只需提供要修改的字段。
DELETE：删除指定资源。
HEAD：获取响应头，通常用于检查资源的状态。
OPTIONS：获取服务器支持的请求方法，常用于跨域请求。
TRACE：回显服务器收到的请求，主要用于测试或诊断

get请求和post请求

相同点：

底层都是基于TCP/IP协议实现的
都用于与服务器进行数据交换
服务器都会返回响应，包含状态码和数据

不同点：

数据传递：
GET：数据通过 URL 查询字符串传递，限制长度。
POST：数据通过请求体传递，支持更大数据量。
安全性：
GET：不适合传递敏感数据，数据暴露在 URL 中。
POST：相对安全，数据不显示在 URL 中。
幂等性：
GET：是幂等的，多次请求结果相同。
POST：不是幂等的，多次请求可能产生不同结果。
缓存：
GET：可以被缓存。
POST：通常不被缓存。
编码方式：
GET请求只能进行url编码
POST请求支持多种编码方式
请求过程：
GET请求产生一个TCP数据包，浏览器把请求头和请求体一并发送出去
POST请求产生两个TCP数据包，浏览器先发送请求头，服务器响应100，然后浏览器再发送请求体

http和https

http

http是一种超文本传输协议，也是应用层协议，是为了实现某一类具体应用的协议，并由某一运行在用户空间的应用程序来实现其功能

HTTP响应由四个部分组成：状态行、响应头、空行、响应体

状态行：协议版本、状态码及状态描述
响应头：响应头主要字段有connection、content-type、content-encoding、content-length、set-cookie、Last-Modified、Cache-control、Expires
响应体：服务器返回给客户端的内容

特点：

明文传输，安全性较差
页面响应速度较快，使用TCP三次握手建立连接，客户端与服务器需要交换3个包
80端口
运行在TCP协议之上

https

HTTPS即超文本传输安全协议，是一种通过计算机网络进行安全通信的传输协议

HTTP+SSL，传输过程加密，安全性较好，具有安全性的ssl加密传输协议
需要到CA机构（数字证书认证机构）申请证书，需要一定的费用
页面响应速度较慢，使用TCP三次握手建立连接，客户端与服务器需要交换3个包，SSL握手需要交换9个包，一共12个包
443端口
基于SSL/TLS之上的HTTP协议，比HTTP更耗费服务器资源
运行在SSL协议之上，SSL协议运行在TCP协议之上

常见的状态码

200 表示从客户端发来的请求在服务器端被正常处理了
204 表示请求处理成功，但没有资源返回
301 表示永久重定向，请求的资源已被分配了新的URI，以后应使用资源现在所指的URI
302 表示临时性重定向
304 服务器端资源未改变，可直接使用客户端未过期的缓存
400 表示请求报文中存在语法错误，当错误发生时，需修改请求的内容后再次发送请求
401 表示未授权，当前请求需要用户验证
403 请求资源的访问被服务器拒绝了
404 请求资源不存在，也可以在服务器端拒绝请求且不想说明理由时使用
500 服务器内部错误，服务器端在执行请求时发生了错误
503 服务器超时，服务器暂时处于超负载或正在停机维护，现在无法处理请求

同源策略

同源策略是一种网络安全机制，用于防止不同源（域名、协议和端口）之间的恶意交互。具体来说，浏览器仅允许来自同一源的脚本访问和操作网页的资源。其主要目的是保护用户数据，防止跨站点请求伪造（CSRF）和跨站点脚本攻击（XSS）

跨域

跨域是指在网页中，来自一个源（域名、协议、端口）的网站试图访问另一个源的资源。由于同源策略的限制，浏览器默认不允许这种行为，以保护用户数据和防止安全风险。常见的跨域场景包括使用 Ajax 请求不同域的 API、访问不同域的图片或脚本等。解决跨域问题的方法有 CORS（跨源资源共享）、JSONP、代理服务器等

解决跨域

方式一：JSONP请求

优点：简单易用，适用于不支持 CORS 的服务器
缺点：只支持 GET 请求；存在安全隐患，可能导致 XSS 攻击

工作原理：
1. 在网页中动态创建一个 `<script>` 标签，源指向目标域的 API
2. 目标服务器返回一个 JavaScript 函数调用，函数名通常是请求时指定的回调函数
3. 当 `<script>` 标签加载完成，回调函数被执行，从而获取数据

// jsonp
// 可以通过动态创建script标签，再请求一个接口地址
// 原生js
    var script = document.createElement('script');
    script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.demo2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}
// vue中使用vue-jsonp插件实现跨域
this.$jsonp('http://xxx' , params).then((res)=>{
    console.log(res)
})

tcp和udp

相同点：

都属于传输层协议，用于在网络中传输数据
都可以用于传输应用层数据

不同点：

连接性：
TCP：面向连接，建立连接后再传输数据
UDP：无连接，数据报文直接发送
可靠性：
TCP：提供数据完整性、顺序控制和重传机制，确保数据可靠传输
UDP：不保证数据的可靠性，可能丢失或乱序
速度：
TCP：因其连接建立和错误检查机制，相对较慢
UDP：由于没有额外的控制，传输速度较快
应用场景：
TCP：适用于需要可靠传输的应用，如网页浏览、文件传输等
UDP：适用于实时应用，如视频流、在线游戏等
头部开销：
TCP：头部较大（20字节以上），包含序列号、确认号等信息
UDP：头部较小（8字节），只包含源端口、目标端口等基本信息

总结：TCP适合需要可靠和有序传输的场景，而UDP适合对速度要求高、可以容忍数据丢失的场景

三次握手

三次握手的最主要目的是保证连接是双工的，可靠更多的是通过重传机制来保证的

第一次握手：建立连接时，客户端发送syn包（seq=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（seq=k），即SYN+ACK包，此时服务器进入SYN_RECV状态
第三次握手：客户端收到服务器的SYN_ACK包，向服务器发送确认包（ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手

四次挥手

四次挥手（Four-Way Wavehand）即终止TCP连接，就是指断开一个TCP连接时，需要客户端和服务端总共发送4个包以确认连接的断开，在socket编程中，这一过程由客户端或服务端任一方执行close来触发

第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态
第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态
第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态
第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手