文章目录GET和POST请求的区别HTTP状态码TCP和UDP的区别从输入url到界面显示发生了什么浏览器怎么加载资源的HTTP 和 HTTPS跨域、同源HTTP缓存HTTP报文组成部分常见的HTTP请求方法HTTP请求头有哪些HTTP1.0/1.1/2.0 的区别cookie有哪些字段Cookie的作用localStoragecookie、sessionStorage、localStorage的区别Js本地存储的方式JWT令牌GET和POST请求的区别安全性GET语义是从服务器获取指定的资源是“只读”的安全且幂等所以可以对GET请求的数据做缓存并且在浏览器中GET请求可以保存未书签。POST语义是根据请求负荷对指定的资源做处理。会修改服务器上的资源不安全也不幂等。所以浏览器一般不会缓存POST请求也不能把POST请求保存为书签。请求长度GET的参数全部都在URL中请求长度收到URL的限制。POST理论上来说在协议层面没有限制可能受到内存、网络传输限制参数类型GET只允许ASCII字符POSTASCII字符/二进制数据/JSON等编码类型GET强制URL编码POSTapplication/x-www-form-urlencoded类似GET的URL编码适合简单表单、multipart/form-data适合文件上传HTTP状态码200 请求成功201 请求成功并且创建了新的资源。202请求已接受但尚未处理完成。204请求成功但没有返回内容。206 部分内容 服务器成功执⾏部分请求 应⽤于 HTTP 分块下载或断点续传响应返回的 body 数据并不是资源的全部也是处理成功的状态301 永久性重定向请求的资源已不存在需⽤新的 URL 访问302 临时重定向请求的资源还在暂时需要⽤另⼀个 URL 来访问系统维护、双十一服务降级303请求对应的资源存在另⼀个URL常⽤于将POST 请求重定向到 GET400 请求的语法错误401 未授权一般是用户未登录403 禁止访问资源禁⽌访问资源可能是客户端 权限不对404 资源不存在502 服务器作为网关或代理时从上游服务器收到无效响应。504 网关超时 ⼀般是应⽤层服务超时超过了⽹关配置的时间TCP和UDP的区别TCP传输控制协议和 UDP用户数据报协议是传输层的核心协议它们的核心区别如下1. 连接方式和数据传输特性TCPUDP连接面向连接三次握手建立连接无连接直接发送数据包可靠性保证数据按序到达不保证可靠传输数据确认通过ACK机制确认接收无确认机制重传机制自动重传丢失的数据包不重传数据排序保证数据按发送顺序到达不保证顺序流量控制通过滑动窗口动态调整发送速率无控制可能丢包拥塞控制有慢启动、拥塞避免算法无可能加剧网络拥塞场景可靠性优先文件传输、网页浏览、电子邮件等实时性优先或简单查询视频流、游戏、DNS查询代表简单查询等典型表现TCP传输文件时不会出错但可能延迟高UDP直播时可能卡顿但延迟低。2. 首部开销特性TCP首部20-60字节UDP首部固定8字节包含字段序列号、确认号、窗口大小等控制信息仅源/目标端口、长度、校验和影响适合大数据量传输适合高频小数据包如VoIP应用场景对比应用场景TCP适用案例UDP适用案例可靠性优先HTTP网页加载、FTP文件传输-实时性优先-在线游戏、视频会议、直播简单查询-DNS查询、DHCP分配IP总结如何选择用TCP当需要数据完整如银行转账、传输大文件、容忍一定延迟。用UDP当追求实时性如视频通话、允许少量丢包如游戏位置更新、需要多播/广播。从输入url到界面显示发生了什么浏览器怎么加载资源的解析URL → DNS解析 → 获取MAC地址 → 建立TCP连接 → 如果使用httpsTLS握手 → 浏览器发送HTTP请求报文 → 服务器发送HTTP响应报文 → 页面渲染 → HTTP请求断开连接渲染过程 解析HTML → 构建DOM/CSSOM → 渲染树 → 布局 → 绘制 → 合成 → 显示地址栏输入url地址浏览器判断URL是否合法如果不合法将输入内容作为搜索条件使用用户默认的搜索引擎进行搜索大部分浏览器会从历史记录、、书签等地方查找输入的内容并给出智能提示如果合法判断是否完整如果不完整浏览器可能会对地址进行猜测补全地址前缀或者后缀。- 进行DNS解析浏览器不能通过域名找到TCP/IP地址所以需要进行DNS解析找到对应的IP地址进行访问。这个过程如下操作系统会检查本地缓存和hosts文件中是否有这个文件的网址记录有的话就从记录里面找到对应的IP地址完成域名的解析。没有的话使用TCP/IP种设置的DNS服务器进行查询如果要查询的内容包含在本地配置资源中则返回解析结果完成域名的解析。还没有的话检查本地DNS服务器是否缓存有该网址记录有的话就返回解析结果完成域名的解析。本地DNS服务器递归地发送查询报文到根域名服务器、顶级域名服务器、权威域名服务器逐级解析最终返回ip。本地DNS服务器发送查询报文到根DNS服务器根DNS服务器收到请求后返回顶级域DNS服务器地址然后本地DNS服务器再发送请求报文到顶级域DNS服务器顶级域DNS服务器收到请求后返回权威DNS服务器地址然后本地DNS服务器再发送请求报文到权威DNS服务器权威DNS服务器收到请求后返回最终IP地址完成域名的解析- 建立TCP连接当浏览器获取到服务器的IP地址后浏览器会通过一个随机的端口号向服务器80端口发起连接请求这个连接请求到达服务器端后通过TCP三次握手建立TCP链接- 发送http/https请求建立连接后就可以通过HTTP进行数据的传输了若为HTTPS还需添加一层协议作为加密及认证的服务HTTPS协议使用SSL和TLS保障信息的安全。SSL的作用是认证客户端和服务器确保数据发送到正确的客户端和服务器加密数据防止数据中途被窃取。维护数据的完整性确保数据在传输过程中不被改变。TLS协议的作用是用在两个通信应用程序之间提供保密性和数据完整性。TLS协议有两层TLS记录协议和TLS握手协议- 服务器返回数据当浏览器到web服务器的链接建立后浏览器会发送一个初始的HTTP GRET请求请求目标通常是一个HTML文件服务器收到请求后将发回一个HTTP响应报文内容包括相关的响应头和HTML正文。- 浏览器解析并渲染页面不同的浏览器引擎渲染过程是不太一样的以谷歌浏览器为例首先处理HTML标记并构建DOM树第二步处理CSS标记并构建CSSOM树第三步将DOM树和CSSOM树合并为一棵渲染树第四步根据渲染树来布局计算每个节点的几何信息第五步将各个节点渲染到屏幕上这样就完成了页面的渲染。- 断开TCP连接现在的浏览器为了优化请求的耗时默认都会开启持久链接也就是说浏览器关闭的时候TCP链接才会关闭也就是进行TCP四次挥手获取MAC地址⽹络层会将本机地址作为源地址获取的 IP 地址作为⽬的地址。然后将下发给数据链路层数据链路层的发送需要加⼊通信双⽅的 MAC 地址建立TCP链接三次握手SYN客户端发送SYN1, Seqx。SYN-ACK服务器回复SYN1, ACKx1, Seqy。ACK客户端发送ACKy1, Seqx1。TLS握手HTTPS握手协商加密参数Client Hello客户端发送支持的加密算法和随机数。Server Hello服务器选择加密算法并返回随机数证书含公钥。验证证书客户端验证证书合法性CA链、有效期等。密钥交换客户端生成预主密钥用公钥加密发送给服务器。完成握手双方根据随机数和预主密钥生成会话密钥后续通信加密。关闭TCP连接四次挥手默认HTTP/1.1下保持连接Connection: keep-alive若关闭则需四次挥手FIN客户端发送FIN1, Sequ。ACK服务器回复ACKu1。FIN服务器发送FIN1, Seqv。ACK客户端回复ACKv1等待2MSL后关闭。HTTP 和 HTTPSHTTP是超文本传输协议明文传输有安全风险。HTTPS在TCP和JHTTP网络层之间加入SSL / TLS安全协议使得报文加密传输。HTTP在TCP三次握手后就可以进行报文传输。HTTPS还需进行SSL / TLS握手过程。HTTP默认端口号80.HTTPS默认端口号443加密方式混合加密TLS握手阶段采用非对称加密。在确保密钥是安全的前提下后面通信过程全部使用对称加密。非对称加密用于验证身份和交换密钥使用对称加密的原因对称加密只使用一个密钥运算速度快安全等级稍低。非对称加密使用公钥和私钥安全等级高但速度慢。数字签名发送方用摘要算法对原始数据计算哈希值该哈希值唯一且无法逆向推导出内容。将哈希值附加到数据中一起传输。接收方用相同密钥计算哈希值比较哈希值判断内容是否被篡改。数字证书和数字签名数字证书验证可靠性数字签名验证完整性。证书在TLS握手阶段发送签名在建立连接后和数据一起发送给客户端。数字证书CA私钥签名客户端用CA公钥验证证书真实性。跨域、同源从一个地址请求另一个地址协议、域名、端口只要不满足其中一个要求就不符合同源策略出现跨域。跨域请求通常是由于前端应⽤程序例如⽹站或移动应⽤程序需要访问后端API或其他资源所导致的。为了解决跨域问题可以使⽤以下⽅法之⼀如何解决跨域问题CORS最标准的方式是后端开启 CORS 让浏览器知道“这个跨域请求是被允许的”。CORS是浏览器和服务器之间的⼀种协议允许跨域资源共享。通过在服务器端添加特殊的HTTP头可以允许浏览器在跨域情况下访问服务器资源。 Springcloud有提供这方面过滤器的系列方法CorsFilter可以添加头信息代理由于服务端之间没有跨域可以在前端应⽤程序的服务器中设置代理将前端应⽤程序的请求转发到后端API。这样前端应⽤程序就可以通过与代理服务器的同源连接来访问后端API。前端开发阶段常用 devServer/proxy 或 Vite proxy 本质是让本地开发服务器代你转发请求生产环境常用 Nginx 反向代理把前端和接口统一到同一域名下JSONP利用 script 标签不受同源策略限制的特性通过script标签的src属性进行跨域请求并通过回调函数将数据返回给前端应⽤程序来实现跨域。这种⽅法通常只能⽤于GET请求。HTTP缓存http缓存分为强制缓存和协商缓存两种。强制缓存缓存生效流程浏览器请求资源时先检查 Expireshttp1.0或 Cache-Control http1.1。如果缓存未过期直接读取本地缓存200 OK (from disk cache)不向服务器发送请求。如果缓存过期进入 协商缓存 阶段。适用于静态资源JS/CSS/图片的长期缓存。协商缓存缓存生效流程浏览器发现强制缓存过期携带 If-Modified-Since 1.0或 If-None-Match1.1 向服务器发起请求。服务器比对资源是否变化未变化 → 返回 304 Not Modified浏览器使用本地缓存。已变化 → 浏览器使用新资源并更新本地缓存包括新的 Last-Modified1.0或 ETag1.1和强缓存时间。适用于频繁更新的资源如 HTML 文件。对比特性强制缓存协商缓存是否发请求否直接读缓存是询问服务器响应状态码200 (from disk cache)304 (Not Modified)控制字段Cache-Control、ExpiresLast-Modified / ETag适用资源长期不变的静态资源可能变化的动态资源HTTP报文组成部分HTTP报文请求报文、响应报文请求报文请求行、请求头、空行、请求体响应报文状态行、响应头、空行、响应体常见的HTTP请求方法HTTP请求头有哪些HTTP 请求头是客户端如浏览器向服务器发送请求时附加的元数据用于传递请求的上下文信息、控制缓存、身份认证等。一、基础请求头请求头示例值作用说明HostHost: example.com必选指定目标服务器域名和端口HTTP/1.1 规范要求User-AgentUser-Agent: Mozilla/5.0...标识客户端类型浏览器、操作系统等AcceptAccept: text/html,application/json声明客户端可处理的响应内容类型MIME 类型及优先级Accept-LanguageAccept-Language: en-US,zh-CN声明客户端优先的语言Accept-EncodingAccept-Encoding: gzip, deflate声明客户端支持的压缩算法ConnectionConnection: keep-alive控制连接是否保持活跃keep-alive或close二、缓存控制头请求头示例值作用说明Cache-ControlCache-Control: no-cache控制缓存行为max-age3600,no-store,must-revalidate等If-Modified-SinceIf-Modified-Since: Mon, 01 Jul 2024 12:00:00 GMT资源未修改时返回 304 状态码需配合服务器Last-Modified响应头If-None-MatchIf-None-Match: abc123资源 ETag 未匹配时返回 304优先级高于If-Modified-Since三、身份认证与安全头请求头示例值作用说明AuthorizationAuthorization: Bearer xyz123携带认证凭证Basic、Bearer Token、OAuth 等CookieCookie: sessionIdabc123发送服务器之前设置的 Cookie 数据RefererReferer: https://example.com/page表示请求来源页面的 URL注意拼写错误是历史遗留OriginOrigin: https://example.com用于 CORS 请求声明请求来源不含路径四、内容协商与范围请求请求头示例值作用说明Content-TypeContent-Type: application/json请求体的格式POST/PUT 请求常用Content-LengthContent-Length: 1024请求体的字节大小RangeRange: bytes0-499请求部分内容用于断点续传或分片下载五、CORS跨域相关头请求头示例值作用说明Access-Control-Request-MethodAccess-Control-Request-Method: POST预检请求OPTIONS中声明实际请求方法Access-Control-Request-HeadersAccess-Control-Request-Headers: X-Custom-Header预检请求中声明自定义头字段六、其他常用头请求头示例值作用说明X-Requested-WithX-Requested-With: XMLHttpRequest标识 AJAX 请求传统方式非标准DNTDNT: 1请求禁用追踪Do Not Track但多数网站不遵守Upgrade-Insecure-RequestsUpgrade-Insecure-Requests: 1提示服务器优先返回 HTTPS 资源用于 HTTP 页面内混合内容升级完整请求示例GET /api/data HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 (Windows NT 10.0) Accept: application/json Accept-Language: en-US Authorization: Bearer xyz123 Cache-Control: no-cache Connection: keep-aliveHTTP1.0/1.1/2.0 的区别1. HTTP1.0HTTP 1.0浏览器与服务器只保持短暂的连接每次请求都需要与服务器建立一个TCP连接。服务器完成请求处理后立即断开TCP连接服务器不跟踪每个客户也不记录过去的请求。2. HTTP1.1在HTTP1.1中默认支持长连接Connection: keep-alive即在一个TCP连接上可以传送多个HTTP请求和响应减少了建立和关闭连接的消耗和延迟。建立一次连接多次请求均由这个连接完成。同时HTTP 1.1还允许客户端不用等待上一次请求结果返回就可以发出下一次请求但服务器端必须按照接收到客户端请求的先后顺序依次回送响应结果以保证客户端能够区分出每次请求的响应内容存在 队头阻塞”问题。同时HTTP1.1在HTTP1.0的基础上增加更多的请求头和响应头来完善的功能如下引入了更多的缓存控制策略如If-Unmodified-Since,If-Match,If-None-Match等缓存头来控制缓存策略引入range允许只请求资源某个部分引入host实现了在一台WEB服务器上可以在同一个IP地址和端口号上使用不同的主机名来创建多个虚拟WEB站点3. HTTP2.0多路复用HTTP/2复用TCP连接在一个连接里客户端和浏览器都可以同时发送多个请求或回应而且不用按照顺序一一对应这样就避免了”队头堵塞”二进制分帧在 HTTP/2 协议中每个数据流以消息的形式发送而每条消息又由一个或多个二进制编码帧组成。由于帧是独立的传输单位多个帧之间可以乱序发送接收方只需根据帧首部的流标识就能将它们重新组装成完整的消息。这种基于帧的传输机制正是 HTTP/2 实现多路复用的关键条件它允许同时交错发送多个请求和响应显著提高了传输效率。首部压缩在 HTTP/1.x 中因为HTTP/1.x 协议不带状态每次请求都必须附上所有信息请求的很多字段都是重复的。HTTP/2在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键值对对于相同的数据不再通过每次请求和响应发送。首部表在HTTP/2的连接存续期内始终存在由客户端和服务器共同渐进地更新推送器服务HTTP2引入服务器推送当服务器收到一个主资源如HTML请求时可以预测客户端接下来需要的相关资源如CSS、JS、图片并主动推送这些资源而不是等待客户端解析HTML后再发起请求。限制尽管 HTTP/2 相比 HTTP/1.x 有显著改进但它仍然存在一些重要的限制和挑战队头阻塞HTTP/2 虽然解决了应用层的队头阻塞多个流可以并行但在TCP 层仍然存在队头阻塞如果单个 TCP 包丢失所有流都会被阻塞等待重传服务器推送的实际限制推送资源可能不被需要服务器预测不一定准确可能推送了用户不需要的资源造成带宽浪费。缓存问题客户端可能已经缓存了推送的资源cookie有哪些字段Name/Value键值对必选//关于cookie的使用如下document.cookie名字值;Expires 用于设置 Cookie 的过期时间ExpiresWed,21Oct201507:28:00GMTMax-Age 用于设置在 Cookie 失效之前需要经过的秒数优先级比Expires高Max-Age604800Domain指定了 Cookie 可以送达的主机名Path指定了一个 URL路径这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部Path/docs #/docs/Web/下的资源会带 Cookie 首部重要安全字段组合SecureHttpOnlySameSite标记为 Secure的 Cookie只应通过被HTTPS协议加密过的请求发送给服务端HttpOnly禁止JS访问防XSS设置后HttpOnlytrue可阻止 JavaScript 通过document.cookie访问该 Cookie有效防御 XSS 攻击窃取敏感信息。常用于会话 ID 或身份验证令牌必须配合 SecureHTTPS使用。例如Set-Cookie:sessionIdabc123;HttpOnly;SecureSameSite是 Cookie 的安全属性控制跨站请求时是否发送 Cookie有三种值SameSiteLax是现代浏览器的默认值。Strict完全禁止跨站发送如银行场景Lax默认允许安全跨站如导航跳转None允许所有跨站需配合 Secure通过上述我们可以看到cookie又开始的作用并不是为了缓存而设计出来只是借用了cookie的特性实现缓存关于cookie的修改首先要确定domain和path属性都是相同的才可以其中有一个不同得时候都会创建出一个新的cookieSet-Cookie:nameaa;domainaa.net;path/# 服务端设置 document.cookienamebb;domainaa.net;path/# 客户端设置最后cookie的删除最常用的方法就是给cookie设置一个过期的事件这样cookie过期后会被浏览器删除Cookie的作用会话状态管理它会保持用户登录状态在无状态的HTTP协议中维持连续性。比如你登录淘宝关掉浏览器再打开还是保持登录状态就是因为 cookie 存了你的身份凭证。个性化服务存储语言或者主题等设置跟踪行为实现用户行为追踪跟”猜你喜欢“这些功能挂钩localStorageHTML5新方法生命周期持久化的本地存储除非主动删除数据否则数据是永远不会过期的存储的信息在同一域中是共享的当本页操作新增、修改、删除了localStorage的时候本页面不会触发storage事件,但是别的页面会触发storage事件。大小5M跟浏览器厂商有关系localStorage本质上是对字符串的读取如果存储内容多的话会消耗内存空间会导致页面变卡受同源策略的限制缺点无法像Cookie一样设置过期时间只能存入字符串无法直接存对象cookie、sessionStorage、localStorage的区别Js本地存储的方式存储大小cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制但比cookie大得多可以达到5M或更大有效时间localStorage存储持久数据浏览器关闭后数据不丢失除非主动删除数据 sessionStorage数据在当前浏览器窗口关闭后自动删除cookie设置的cookie过期时间之前一直有效即使窗口或浏览器关闭数据与服务器之间的交互方式cookie的数据会自动的传递到服务器服务器端也可以写cookie到客户端 sessionStorage和localStorage不会自动把数据发给服务器仅在本地保存应用场景标记用户与跟踪用户行为的情况推荐使用cookie适合长期保存在本地的数据令牌推荐使用localStorage敏感账号一次性登录推荐使用sessionStorage存储大量数据的情况、在线文档富文本编辑器保存编辑历史的情况推荐使用indexedDBJWT令牌用户账号密码认证通过后会得到一个JWT令牌JWT令牌中已经包括了用户相关的信息客户端携带JWT访问服务器服务器完成令牌校验后返回资源。JWT令牌包括三部分头部Header、载荷Payload、签名Signature并以.进行拼接。其中头部和载荷都是存放JSON数据并且用Base64Url编码。**头部Header**包括令牌的类型即JWT及使用的哈希算法如HMAC SHA256或RSA{alg:HS256,typ:JWT}载荷Payload存放有效信息例如面向的用户sub用户名name令牌的签发时间iat过期时间exp等{sub:1234567890,name:John Doe,iat:1516239022}签名Signatrue将前两部分进行编码使用header中声明的签名算法进行签名用于防止jwt内容被篡改SignatureHMACSHA256(base64Url(header).base64Url(payload),secretKey)具体实现参考如何实现jwt鉴权机制注意对文中提到的分布式系统学成在线的老师说用对称加密性能会高一些而用非对称加密安全性会更好如果确保不同的微服务安全可以使用对称加密。