盒子
盒子
文章目录
  1. 信息类
  2. 缓存
  3. 网络通信
  4. 跨域
  5. 网络安全

从用途总结http字段

网络通信是前端必知必会的一部分内容,同时也是面试中出现的高频问题。

HTTP是超文本传输协议的缩写,HTTP协议采用了请求/响应模型。所以一般分为通用、请求、响应三类的头字段。在DevTools中的Network面板中,随意点一个请求,就可以看见General、Response Headers、Request Headers。

但这篇文章从另一个角度来分类。这样有一个好处,在面试中,可以从各种角度绕回到http头字段。

信息类

主要规范接受的字符编码、编码格式、内容类型等。主要有以下字段:

  • Accept:接受的内容类型
  • Accept-Charset:字符编码
  • Accept-Encoding:编码格式
  • Accept-Language:语言
  • From:发送请求的用户的Email地址
  • Date:发送报文的日期和时间
  • Status-Code:状态码

缓存

大家都知道缓存策略有两种:强缓存和协商缓存,且都是通过HTTP Header来实现的。

强缓存在缓存时间内直接从缓存中获取数据,状态码为200。设置两种HTTP Header:

  • Expires:值为一个时间,代表资源失效时间。当前时间超过该时间时,缓存失效。
  • Cache-Control:其中一个字段max-age=30表示当前资源的有效时间为30s。

协商缓存则需要验证请求资源是否有更新,如果命中缓存则状态码为304。也是设置两种HTTP Header:

  • Last-Modified表示本地文件最后修改时间。
  • If-Modified-Since会将上边的值发送给服务器,询问服务器在该日期后资源是否有更新。
  • Etag类似于文件指纹,当文件改变后Etag值就会发生改变。
  • If-None-Match将上边的值发送给服务器,询问服务器资源是否发生改变。

网络通信

HTTP通信是无状态的,但在与服务器通信时是需要有状态的。cookie是服务器保存在客户端的一小段文本信息,大小不超过4K。浏览器每次向客户端发送请求的时候,都会自动附带这段信息。

在Cookie中也有很多字段

  • name:cookie的名称
  • value:cookie的值
  • domain:cookie可以访问的域名
  • path:cookie可以访问的页面路径
  • Size:cookie的大小
  • httponly:设置js禁止访问cookie,可以防止XSS攻击
  • expires/Max-Age:有效期
  • secure:设置是否只能通过https传递该cookie

面试又可以扯到这个方向

跨域

如果浏览器发送请求时,如果存在跨域行为,则会在请求头中携带Origin字段。

同时,服务器会在响应报文中添加Access-Control-Allow-Origin字段,值为允许跨域的域名。

在跨域问题又可以聊跨域的解决方式:jsonp、cors、Nginx等九种。

使用vary:origin防止CDN破坏

网络安全

XSS是一种最常见且危害最大的网页安全漏洞,攻击者想尽一切办法。

CSP可以极大程度的保证网页的安全性。

开启CSP的一种方式就是HTTP Header的Content-Security-Policy字段。

CSP也是内含了多个字段,对浏览器的不同类型的资源做出限制。

面试的时候又可以再扯其他的网络安全问题及解决方式。

欢迎关注公众号
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集