前端开发必须详细了解的HTTP头信息

简介: 前端开发者虽然大部分时间都在做页面制作、交互设计及性能优化等与客户端工作,而实际上交互设计不单单是客户端的交互,还必须实现数据上的交互,即数据通讯。WEB上的数据通讯基本上都是以HTTP的形式来实现的,因此对于前端开发者来说就必须对HTTP有足够的认识,HTTP头信息基本都可以通过Firebug的控制台来查看。

前端开发者虽然大部分时间都在做页面制作、交互设计及性能优化等与客户端工作,而实际上交互设计不单单是客户端的交互,还必须实现数据上的交互,即数据通讯。WEB上的数据通讯基本上都是以HTTP的形式来实现的,因此对于前端开发者来说就必须对HTTP有足够的认识,HTTP头信息基本都可以通过Firebug的控制台来查看。

image.png

现在就来说说HTTP。HTTP是一种客户端与服务端的通讯协议,由请求和响应构成。

浏览器向一个URL发送HTTP请求的时候,URL对应的宿主服务器就必须做出响应并发回。和很多Internet服务一样,HTTP协议使用简单的纯文本格式。请求的类型包括GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE,最应用最多的就是GET和POST请求。

GET请求包含一个URL,然后是头。HTTP响应包括状态码、头和响应体。下图是使用firebug获取到的HTTP请求。

image.png

响应头信息

Date:

消息发送的时间,时间的描述格式由rfc822定义。例如,Fri,21 Jan 2011 10:55:14 GMT。Date描述的时间表示世界标准时,换算成本地时间,需要知道用户所在的时区。

Server:

处理请求的服务器软件信息,包含多个产品标识和注释,产品标识一般按照重要性排序。

Cache-Control:

控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了Pragma: no-cache),包括“no-cache”、“no-store”、“max-age”、“private”、“must-revalidate”、“max-stale”、“public”、“min-fresh”、“min-fresh”。

  1. max-age=31536000:指打开新窗口或者在地址栏回车的时候,如果在这个时间内不会重新访问服务器,上面表示缓存时间为1年。若按后退按扭则不会重新访问服务器,无论过没过期,按刷新按钮的话,无论过没过期都会重新访问。
  2. no-cache:请求或响应消息不能缓存(HTTP/1.0用Pragma的no-cache替换)。
  3. private:指打开新窗口以及刷新的时候会访问服务器,在地址栏输入的时候则只有第一次访问时会访问服务器,以后就不再访问,按后退按钮也不会访问服务器。
  4. must-revalidate:和private一样。
  5. no-store:用于防止重要的信息被无意的发布,在请求消息中发送将使得请求和响应消息都不使用缓存,根据缓存超时。
  6. max-stale:指客户端可以接收超出超时期间的响应消息,如果指定max-stale消息的值,那么客户端可以 接收超出超时期指定值之内的响应消息。
  7. public:指响应可以被任何缓存区缓存。
  8. min-fresh:指客户端可以接收响应时间小于当前时间加上指定时间的响应。
  9. min-fresh:指客户端可以接收响应时间小于当前时间加上指定时间的响应。
Expires:

用于控制请求文件的有效时间,当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端;当缓存中数据失效或过期,才决定从服务器更新数据。可以使用Apache的mod_expires 模块来设置,可以控制应答时的Expires头内容和Cache-Control头的max-age指令,当设置了expires后,会自动输出Cache-Control 的max-age 信息,这个数值是expires有效期内的秒数。

Pragma:

用来包含实现特定的指令,最常用的是Pragma:no-cache。在HTTP/1.1协议中,它的含义和Cache- Control:no-cache相同。

Last-Modified:

指在浏览器第一次请求一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间,客户端第二次请求此URL时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过,如果服务器端的资源没有变化,则自动返回HTTP/1.x 304 Not Modified状态码,内容为空,这样就节省了传输数据量。

Content-Encoding:

文档的编码(Encode)方法,只有在解码之后才可以得到Content-Type头指定的内容类型。利用gzip压缩文档能够显著地减少HTML文档的下载时间。通俗点就是WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。

Content-Length:

表示内容长度,只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势,可以把输出文档写入ByteArrayOutputStram,完成后查看其大小,然后把该值放入Content-Length头,最后通过byteArrayStream.writeTo(response.getOutputStream()发送内容。

Content-Type:

服务器告诉浏览器响应的对象的类型。

Connection:

指当客户端和服务器端通信时对于长链接如何进行处理,在http1.1中,客户端和服务器端都是默认对方支持长链接的, 如果客户端使用http1.1协议,但又不希望使用长链接,则需要在header中指明connection的值为close。close(告诉WEB服务器或者代理服务器,在完成本次请求的响应后,断开连接,不要等待本次连接的后续请求了)。keep-alive(告诉WEB服务器或者代理服务器,在完成本次请求的响应后,保持连接,等待本次连接的后续请求)。

Vary:

指定了一些请求头域,这些请求头域用来决定当缓存中存在一个响应,并且该缓存没有过期失效,是否被允许去利用此响应去回复后续请求而不需要重验证(revalidation)。对于一个不能被缓存或失效的响应缓存,Vary头域值用于告诉用户代理选择表现形式(reprentation)的标准。例如源WEB服务器在接到第一个请求消息时,其响应消息的头部为:Content-Encoding: gzip; Vary: Content-Encoding,那么Cache 服务器会分析后续请求消息的头部,检查其 Accept-Encoding,是否跟先前响应的 Vary 头部值一致,即是否使用相同的内容编码方法,这样就可以防止 Cache 服务器用自己 Cache 里面压缩后的实体响应给不具备解压能力的浏览器。

请求头信息
  1. Host:客户端指定访问的WEB服务器的域名或者IP地址和端口号。
  2. User-Agent:发起请求浏览器信息,如浏览器版本号。
  3. Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该 类型下的所有子类型,type/sub-type。
  4. Accept-Charset:浏览器申明自己接收的字符集。
  5. Accept-Encoding:浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate)。
  6. Accept-Language:浏览器申明自己接收的语言,语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等。
  7. Keep-Alive:如果浏览器请求保持连接,表明希望 WEB 服务器保持连接多长时间(秒)。
  8. Connection:close(连接已经关闭),keep-alive(连接保持着,在等待本次连接的后续请求)。
  9. Content-Type:WEB 服务器告诉浏览器自己响应的对象的类型。
  10. Content-Language:WEB 服务器告诉浏览器自己响应的对象的语言。
  11. Content-Length: WEB 服务器告诉浏览器自己响应的对象的长度。
  12. Content-Range: WEB 服务器表明该响应包含的部分对象为整个对象的哪个部分。
  13. Referer:浏览器向 WEB 服务器表明是从哪个网页(URL)发起的当前请求。
  14. Proxy-Authenticate: 代理服务器响应浏览器,要求其提供代理身份验证信息。
  15. Proxy-Authorization:浏览器响应代理服务器的身份验证请求,提供自己的身份信息。
  16. Range:浏览器告诉 WEB 服务器自己想取对象的哪部分。
  17. If-Range:浏览器告诉 WEB 服务器,如果我请求的对象没有改变,就把缺少的部分给我,如果对象改变了,就把整个对象给我。浏览器通过发送请求对象的ETag或者自己所知道的最后修改时间给 WEB 服务器,让其判断对象是否改变了,一般总是跟 Range 头部一起使用。
  18. Last-Modified:WEB 服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间等等。
  19. Expired:WEB服务器表明该实体将在什么时候过期,对于过期了的对象,只有在跟WEB服务器验证了其有效性后,才能用来响应客户请求。
  20. ETag:就是一个对象(比如URL)的标志值,就一个对象而言,比如一个 html 文件,如果被修改了,其 Etag 也会别修改,所以ETag 的作用跟Last-Modified的作用差不多,主要供WEB服务器判断一个对象是否改变了。比如前一次请求某个 html 文件时,获得了其 ETag,当这次又请求这个文件时,浏览器就会把先前获得的 ETag 值发送给 WEB 服务器,然后 WEB 服务器会把这个 ETag 跟该文件的当前 ETag 进行对比,然后就知道这个文件有没有改变了。合理的配置ETag将能够提高WEB的性能。
  21. Authorization:当客户端接收到来自WEB服务器的WWW-Authenticate响应时,用该头部来回应自己的身份验证信息给WEB服务器。
  22. Age:当代理服务器用自己缓存的实体去响应请求时,用该头部表明该实体从产生到现在经过多长时间了。
  23. If-Modified-Since:如果请求的对象在该头部指定的时间之后修改了,才执行请求的动作(比如返回对象),否则返回代码304,告诉浏览器该对象没有修改。
  24. Location:WEB 服务器告诉浏览器,试图访问的对象已经被移到别的位置了,到该头部指定的位置去取。


相关文章
|
13天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
27 3
|
14天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
16 3
|
21天前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
|
27天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`<select>` 和 `<option>`)、文本域(`<textarea>`)、标签解释(`<label>`)、各类按钮(`<button>`)及表单重置功能、无语义布局标签(`<div>` 和 `<span>`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
27天前
|
存储 前端开发 NoSQL
拿下奇怪的前端报错(四):1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中,音频和视频文件在大部分设备上播放时长显示为无限,而单独播放则正常。经调查发现,问题源于HTTP Range请求的处理不当,导致最后一个字节未被正确返回。通过调整请求参数,使JavaScript/MongoDB的操作范围与HTTP Range一致,最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。
|
28天前
|
缓存 前端开发 安全
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
102 0
|
3月前
|
前端开发 算法 Serverless
中后台前端开发问题之保证用户的token等信息的唯一性和不可伪造性如何解决
中后台前端开发问题之保证用户的token等信息的唯一性和不可伪造性如何解决
45 0
|
3月前
|
缓存 应用服务中间件 nginx
[nginx]定制http头信息
[nginx]定制http头信息
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

热门文章

最新文章