前端所必须知道的HTTP知识是些什么呢?原来是这些啊

}

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

其中最著名的是 1999 年 6 月公布的 RFC 2616 ,定义了 }

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

前端所必须知道的HTTP知识是些什么呢?原来是这些啊}

概念: }
前端所必须知道的HTTP知识是些什么呢?原来是这些啊

}

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

}

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

也就是说, }

前端所必须知道的HTTP知识是些什么呢?原来是这些啊}

基于 }
前端所必须知道的HTTP知识是些什么呢?原来是这些啊

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

客户端:user-agent浏览器,特殊比如是工程师使用的程序,以及 Web 开发人员调试应用程序

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

Web服务端由 Web Server 来服务并提供客户端所请求的文档。每一个发送到服务器的请求,都会被服务器处理并返回一个消息,也就是 response

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

代理(Proxies)在浏览器和服务器之间,有很多计算机和其他设备转发了 }

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

有如下的一些作用

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

缓存过滤(像防病毒扫描、家长控制)负载均衡认证(对不同的资源进行权限控制)日志管理}

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

请求——由客户端发送用来触发一个服务器上的动作响应——来自服务器端的应答}

前端所必须知道的HTTP知识是些什么呢?原来是这些啊典型的 }

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

起始行。 请求的起始行:请求方法、请求 Path 和 }

前端所必须知道的HTTP知识是些什么呢?原来是这些啊

1)一个绝对路径,末尾跟上一个 ' ? ' 和查询字符串。这是最常见的形式,称为 原始形式 ( origin form ),被 GET , POST , HEAD 和 OPTIONS 方法所使用

POST / }

GET }
前端所必须知道的HTTP知识是些什么呢?原来是这些啊CONNECT developer.mozilla.org:80 }

OPTIONS * }

1) Content-Type —— application/x-}
前端所必须知道的HTTP知识是些什么呢?原来是这些啊I.其中的数据会被编码成以&分隔的键值对

II.字符以URL编码方式编码。

// 转换过程: {a: 1, b: 2} -> a=1&b=2 -> 如下(最终形式)"a%3D1%26b%3D2"复制代码2) Content-Type —— multipart/form-data前端所必须知道的HTTP知识是些什么呢?原来是这些啊

请求头中的 Content-Type 字段会包含 boundary ,且 boundary 的值有浏览器默认指定。例: Content-Type: multipart/form-data;boundary=—-WebkitFormBoundaryRRJKeWfHPGrS4LKe 。

数据会分为多个部分,每两个部分之间通过分隔符来分隔,每部分表述均有 }

Content-Disposition: form-data;name="data1";Content-Type: text/plaindata1—-WebkitFormBoundaryRRJKeWfHPGrS4LKeContent-Disposition: form-data;name="data2";Content-Type: text/plaindata2—-WebkitFormBoundaryRRJKeWfHPGrS4LKe–复制代码响应 Body 部分:

1)由已知长度的单个文件组成。该类型 body 有两个 header 定义: Content-Type 和 Content-Length

2)由未知长度的单个文件组成,通过将 Transfer-Encoding 设置为 chunked 来使用 chunks 编码。

关于 Content-Length 在下面 }

方法安全方法: }

GET :请求服务器发送某个资源HEAD :跟 GET 方法类似,但服务器在响应中只返回了首部。不会返回实体的主体部分。PUT :向服务器中写入文档。语义:用请求的主体部分来创建一个由所请求的 URL 命名的新文档POST :用来向服务器中输入数据的。通常我们提交表单数据给服务器。【 POST 用于向服务器发送数据, PUT 方法用于向服务器上的资源(例如文件)中存储数据】TRACE :主要用于诊断。实现沿通向目标资源的路径的消息环回( loop-back )测试 ,提供了一种实用的 debug 机制。OPTIONS :请求 WEB 服务器告知其支持的各种功能。可以询问服务器支持哪些方法。或者针对某些特殊资源支持哪些方法。DELETE :请求服务器删除请求 URL 中指定的的资源GET 和 POST 的区别首先要了解下副作用和幂等的概念,副作用指的是对服务器端资源做修改。幂等指发送 M 和 N 次请求(两者不相同且都大于 1),服务器上资源的状态一致。应用场景上,get是无副作用的,幂等的。post 主要是有副作用的,不幂等的情况

技术上有以下的区分:

缓存: Get 请求能缓存, Post 请求不能安全: Get 请求没有 Post 请求那么安全,因为请求都在 URL 中。且会被浏览器保存历史纪录。 POST 放在请求体中,更加安全限制: URL 有长度限制,会干预 Get 请求,这个是浏览器决定的编码: GET 请求只能进行 URL 编码,只能接收 ASCII 字符,而 POST 没有限制。 POST 支持更多的编码类型,而且不对数据类型做限制从 TCP 的角度, GET 请求会把请求报文一次性发出去,而 POST 会分为两个 TCP 数据包,首先发 header 部分,如果服务器响应 100(continue) , 然后发 body 部分。(火狐浏览器除外,它的 POST 请求只发一个 TCP 包)状态码100~199——信息性状态码101 Switching Protocols。在}

1.通用首部( General headers )同时适用于请求和响应消息,但与最终消息主体中传输的数据无关的消息头。如 Date

2.请求首部( Request headers )包含更多有关要获取的资源或客户端本身信息的消息头。如 User-Agent

3.响应首部( Response headers )包含有关响应的补充信息

4.实体首部( Entity headers )含有关实体主体的更多信息,比如主体长( Content-Length )度或其 MIME 类型。如 Accept-Ranges

详细的 Header 见 }

}

在 1991 年发布了 }

}

GET /mypage.html复制代码响应:只包括响应文档本身

<HTML>这是一个非常简单的HTML页面</HTML>复制代码HTML}

协议版本信息会随着每个请求发送响应状态码引入了 }

}

这两个字段的取值可以分为下面几类:

– text: text/html, text/plain, text/css 等- image: image/gif, image/jpeg, image/png 等- audio/video: audio/mpeg, video/mp4 等- application: application/json, application/javascript, application/pdf, application/octet-stream复制代码同时为了约定请求的数据和响应数据的压缩方式、支持语言、字符集等,还提出了以下的 Header

1.压缩方式:发送端: Content-Encoding (服务端告知客户端,服务器对实体的主体部分的编码方式) 和 接收端: Accept-Encoding (用户代理支持的编码方式),值有 gzip: 当今最流行的压缩格式;deflate: 另外一种著名的压缩格式;br: 一种专门为 }

2.支持语言: Content-Language 和 Accept-Language (用户代理支持的自然语言集)

3.字符集:发送端: Content-Type 中,以 charset 属性指定。接收端: Accept-Charset (用户代理支持的字符集)。

// 发送端Content-Encoding: gzipContent-Language: zh-CN, zh, enContent-Type: text/html; charset=utf-8// 接收端Accept-Encoding: gzipAccept-Language: zh-CN, zh, enAccept-Charset: charset=utf-8复制代码虽然 }

}

}

}

}

连接可以复用。长连接: connection: keep-alive 。 }

举个例子,有一台 ip 地址为 61.135.169.125 的服务器,在这台服务器上部署着谷歌、百度、淘宝的网站。为什么我们访问 }

}

}

也就是说,流用来承载消息,消息又是有一个或多个帧组成。二进制传输的方式更加提升了传输性能。 每个数据流都以消息的形式发送,而消息又由一个或多个帧组成。 帧是流中的数据单位。

}

这是一个复用协议。并行的请求能在同一个连接中处理,移除了 }

如上图所示,快照捕捉了同一个连接内并行的多个数据流。 客户端正在向服务器传输一个 DATA 帧(数据流 5),与此同时,服务器正向客户端交错发送数据流 1 和数据流 3 的一系列帧。因此,一个连接上同时有三个并行数据流。

将 }

连接共享,即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id ,这样一个连接上可以有多个 request ,每个连接的 request 可以随机的混杂在一起,接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面。

}

}

}

压缩了 headers 。 }

服务端推送。其允许服务器在客户端缓存中填充数据,通过一个叫服务器推送的机制来提前请求。服务器向客户端推送资源无需客户端明确地请求,服务端可以提前给客户端推送必要的资源,这样可以减少请求延迟时间,例如服务端可以主动把 JS 和 CSS 文件推送给客户端,而不是等到 HTML 解析到资源时发送请求,这样可以减少延迟时间大致过程如下图所示:

如何升级你的 }

}

对称加密和非对称加密对称加密就是两边拥有相同的秘钥,两边都知道如何将密文加密解密。但是因为传输数据都是走的网络,如果将秘钥通过网络的方式传递的话,一旦秘钥被截获就没有加密的意义的

非对称加密

公钥大家都知道,可以用公钥加密数据。但解密数据必须使用私钥,私钥掌握在颁发公钥的一方。首先服务端将公钥发布出去,那么客户端是知道公钥的。然后客户端创建一个秘钥,并使用公钥加密,发送给服务端。服务端接收到密文以后通过私钥解密出正确的秘钥

TLS 握手过程TLS 握手的过程采用的是非对称加密

Client Hello : 客户端发送一个随机值( Random1 )以及需要的协议和加密方式。Server Hello 以及 Certificate : 服务端收到客户端的随机值,自己也产生一个随机值( Random2 ),并根据客户端需求的协议和加密方式来使用对应的方式,并且发送自己的证书(如果需要验证客户端证书需要说明)Certificate Verify : 客户端收到服务端的证书并验证是否有效,验证通过会再生成一个随机值( Random3 ),通过服务端证书的公钥去加密这个随机值并发送给服务端,如果服务端需要验证客户端证书的话会附带证书Server 生成 secret : 服务端收到加密过的随机值并使用私钥解密获得第三个随机值( Random3 ),这时候两端都拥有了三个随机值,可以通过这三个随机值按照之前约定的加密方式生成密钥,接下来的通信就可以通过该密钥来加密解密}

Expires 的值和头里面的 Date 属性的值来判断是否缓存还有效。 Expires 是 Web 服务器响应消息头字段,在响应 }

Cache-Control 指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。但是其设置的是一个相对时间。

指定过期时间: max-age 是距离请求发起的时间的秒数,比如下面指的是距离发起请求 31536000S 内都可以命中强缓存

Cache-Control: max-age=31536000复制代码表示没有缓存

Cache-Control: no-store复制代码有缓存但要重新验证

Cache-Control: no-cache复制代码私有和公共缓存

public 表示响应可以被任何中间人(比如中间代理、 CDN 等缓存) 而 private 则表示该响应是专用于某单个用户的,中间人不能缓存此响应,该响应只能应用于浏览器私有缓存中。

Cache-Control: privateCache-Control: public复制代码验证方式:以下表示一旦资源过期(比如已经超过 max-age ),在成功向原始服务器验证之前,缓存不能用该资源响应后续请求

Cache-Control: must-revalidate复制代码Cache-control 优先级比 Expires 优先级高

以下是一个 Cache-Control 强缓存的过程:

首次请求,直接从 server 中获取。其中会设置 max-age=100第二次请求, age=10 ,小于 100,则命中 Cache ,直接返回第三次请求, age=110 ,大于 110。强缓存失效,就需要再次请求 Server

协商缓存If-Modified-Since——Last-ModifiedLast-Modified 表示本地文件最后修改日期,浏览器会在 request header 加上 If-Modified-Since (上次返回的 Last-Modified 的值),询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来

但是如果在本地打开缓存文件,就会造成 Last-Modified 被修改,所以在 }

If-none-match——ETagsEtag 就像一个指纹,资源变化都会导致 ETag 变化,跟最后修改时间没有关系, ETag 可以保证每一个资源是唯一的。 If-None-Match 的 header 会将上次返回的 Etag 发送给服务器,询问该资源的 Etag 是否有更新,有变动就会发送新的资源回来

If-none-match 、 ETags 优先级高于 If-Modified-Since、Last-Modified

第一次请求:

第二次请求相同网页:

协商缓存,假如没有改动的话,返回 304 ,改动了返回 200 资源

200:强缓存 Expires/Cache-Control 失效时,返回新的资源文件200 (from cache) : 强缓 Expires/Cache-Control 两者都存在,未过期, Cache-Control 优先 Expires 时,浏览器从本地获取资源成功304 (Not Modified) :协商缓存 Last-modified/Etag 没有过期时,服务端返回状态码304现在的200 (from cache) 已经变成了 disk cache (磁盘缓存)和 memory cache (内存缓存)两种

revving 技术上面提到 }

web 开发者发明了一种被 Steve Souders 称之为 revving 的技术。不频繁更新的文件会使用特定的命名方式:在 URL 后面(通常是文件名后面)会加上版本号。

弊端:更新了版本号,所有引用这些的资源的地方的版本号都要改变

web 开发者们通常会采用自动化构建工具在实际工作中完成这些琐碎的工作。当低频更新的资源( js/css )变动了,只用在高频变动的资源文件( html )里做入口的改动。

Cookies}

创建 cookieSet-Cookie 响应头部和 Cookie 请求头部

Set-Cookie: <cookie名>=<cookie值>复制代码会话期Cookie会话期Cookie是最简单的 Cookie :浏览器关闭之后它会被自动删除,也就是说它仅在会话期内有效。会话期 Cookie 不需要指定过期时间( Expires )或者有效期( Max-Age )。需要注意的是,有些浏览器提供了会话恢复功能,这种情况下即使关闭了浏览器,会话期 Cookie 也会被保留下来,就好像浏览器从来没有关闭一样

持久性Cookie和关闭浏览器便失效的会话期 Cookie 不同,持久性 Cookie 可以指定一个特定的过期时间( Expires )或有效期( Max-Age )。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;复制代码Cookie的Secure和}

标记为 Secure 的 Cookie 只应通过被 }

通过 JavaScript 的 Document.cookie API 是无法访问带有 }

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; }

Domain 标识指定了哪些主机可以接受 Cookie 。如果不指定,默认为当前的主机(不包含子域名)。如果指定了 Domain ,则一般包含子域名。

例如,如果设置 Domain=mozilla.org ,则 Cookie 也包含在子域名中(如 developer.mozilla.org )。

Path 标识指定了主机下的哪些路径可以接受 Cookie (该 URL 路径必须存在于请求 URL 中)。以字符 %x2F ("/") 作为路径分隔符,子路径也会被匹配。

例如,设置 Path=/docs ,则以下地址都会匹配:

/docs/docs/Web//docs/Web/}

None 浏览器会在同站请求、跨站请求下继续发送 cookies ,不区分大小写。【旧版本 chrome 默认 Chrome 80 版本之前】Strict 浏览器将只在访问相同站点时发送 cookie 。Lax 将会为一些跨站子请求保留,如图片加载或者 frames 的调用,但只有当用户从外部站点导航到 URL 时才会发送。如 link 链接Set-Cookie: key=value; SameSite=Strict复制代码None Strict Lax

在新版本的浏览器( Chrome 80 之后)中, SameSite 的默认属性是 SameSite=Lax 。换句话说,当 Cookie 没有设置 SameSite 属性时,将会视作 SameSite 属性被设置为 Lax —— 这意味着 Cookies 将不会在当前用户使用时被自动发送。如果想要指定 Cookies 在同站、跨站请求都被发送,那么需要明确指定 SameSite 为 None 。因为这一点,我们需要好好排查旧系统是否明确指定 SameSite ,以及推荐新系统明确指定 SameSite ,以兼容新旧版本 Chrome

更多 cookie 相关,可以查看我之前总结的一篇关于 cookie 的文章 前端须知的 Cookie 知识小结

}

跨域资源共享标准新增了一组 }

简单请求简单请求(不会触发 CORS 的预检请求)需要同时满足以下三点:

方法是 GET/HEAD/POST 之一Content-Type 的值仅限 text/plain 、 multipart/form-data 、 application/x- 三者之一}

简化以下:

请求首部字段 Origin 表明该请求来源于 }

本例中,服务端返回的 Access-Control-Allow-Origin: * 表明,该资源可以被任意外域访问。如果服务端仅允许来自 }

Access-Control-Allow-Origin: }

预检请求规范要求,对那些可能对服务器数据产生副作用的 }

服务器确认允许之后,才发起实际的 }

预检请求中同时携带了下面两个首部字段:

Access-Control-Request-Method: POSTAccess-Control-Request-Headers: X-PINGOTHER, Content-Type复制代码首部字段 Access-Control-Request-Method 告知服务器,实际请求将使用 POST 方法。首部字段 Access-Control-Request-Headers 告知服务器,实际请求将携带两个自定义请求首部字段: X-PINGOTHER 与 Content-Type 。服务器据此决定,该实际请求是否被允许。

预检请求的响应中,包括了以下几个字段

Access-Control-Allow-Origin: }

对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为“*”。 这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为“*”,请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 }

CORS 涉及到的请求和响应头如下: }

Access-Control-Allow-Origin 允许访问该资源的外域 URI 。对于不需要携带身份凭证的请求,服务器可以指定该字段的值为通配符,表示允许来自所有域的请求。Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单Access-Control-Max-Age 头指定了 preflight 请求的结果能够被缓存多久Access-Control-Allow-Credentials 头指定了当浏览器的 credentials 设置为 true 时是否允许浏览器读取 response 的内容。Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 }

OriginAccess-Control-Request-MethodAccess-Control-Request-Headers有感兴趣的朋友可以关注一下我的公众号:前端维他命,不定时更新优秀文章。

未经允许不得转载:搜热门主机 » 前端所必须知道的HTTP知识是些什么呢?原来是这些啊

赞 (0)

Warning: count(): Parameter must be an array or an object that implements Countable in /www/wwwroot/srmzj.com/wp-includes/class-wp-comment-query.php on line 405