【HTTP协议与网络编程】缓存和跨域资源共享

一. HTTP的缓存机制

1. 缓存机制是什么

• 概念：

  缓存就是一种将资源的副本保存到用户的客户端电脑中，下次请求时无需再次访问服务器而是访问本地

  • 缓存需要合理配置，因为并不是所有资源都是永久不变的。重要的是对应资源的缓存应截止到其下一次发生改变(既不能缓存过期的资源)

• 缓存的优势：

  1. 缓解服务端的资源消耗和运行压力，提升服务器端的整体性能
  2. 减少服务器端资源加载的延迟，进而减少显示某个资源所用的时间
  3. 减少对带宽造成的压力，避免网络拥塞问题的出现
  4. Web站点变得更具有响应性

• 缓存的应用：常见的HTTP缓存只能储存GET响应

  缓存案例：

  1. 检索请求的成功响应：响应状态码为200，表示成功
  2. 不变的重定向：响应状态码为301
  3. 错误响应：响应状态码为404的一个页面
  4. 不完全的响应：响应状态码为206，只返回局部的信息
  5. 除了GET外，如果匹配到作为一个已被定义的cache键名的响应

2. 缓存机制

缓存分为私有缓存和共享缓存

• 私有缓存：只能用于单独用户

  • 游览器缓存拥有用户通过HTTP下载的所有文档。这些缓存为游览过的文档提供向后/向前导航、保存网页、查看源码等功能。
  • 可以避免再次向服务器发送多余的请求
  • 同样可以提供缓存内容的离线预览
  • 使用时设置Cache-Control的值为private

• 共享缓存：能被多个用户使用

  • 使用时设置Cache-Control的值为public

3. 缓存控制

实现缓存可以使用三种头部信息: Cache-Control、Pragma和Expires

• Cache-Control头：

  • HTTP/1.1定义的Cache-Control头用来区分对缓存机制的支持情况，请求头和响应头都支持这个属性
    • 多使用在响应头中
  • 可以设置不同的缓存策略
    • 禁止进行缓存：
      • Cache-Control: no-store
      • Cache-Control: no-cache,no-store,must-revalidate
    • 强制确认缓存:
      • Cache-Control: no-cache
    • 缓存过期机制:
      • Cache-Control: max-age=31536000
    • 缓存验证确认:
      • Cache-Control: must-revalidate

• Pragma头:

  • HTTP/1.0定义的，效果和Cache-Control: no-cache相同，但是HTTP响应头不支持这个属性
  • 通常用于向后兼容基于HTTP/13.0的客户端
  • 设置Pragma: no-cache

• Expires头：

  • 此响应头包含日期和时间，既在此时间之后响应过期，作为辅助Cache-Control使用
    • 无效的日期，如0代表过去的日期，既该资源已过期
    • 如果在Cache-Control响应头设置了"max-age"或“s-max-age”指令吗，那么Expires头会被忽略

二. Cookie

1. Cookie是什么

cookie是服务器发送到用户游览器上保存在本地的一小块数据，会在游览器下次向同一服务器再发起请求是被携带并发送到服务器上。

• Cookie用来解决HTTP协议的无状态问题

• Cookie保存在客户端某个特定的目录下的一个拓展名为‘txt’文本文件中，且不同站点的Cookie数据保存在不同的文件中

• Cookie数据一般都是加密后保存的

• Cookie的作用域：

  Domain和Path标记定义了Cookie的作用域，既Cookie应该发送给哪些URL

  • Domain标识指定了哪些主键可以接收Cookie
    • 不指定默认为当前文档的主机(不含子域名)
    • 如果指定了Domain，则一般包含子域名。
  • Path标识制定了主机下的哪些路径可以接受Cookie。以字符%x2F(’/’)作为路径分隔符，子路径也会被匹配

• Cookie的有效期

  Max-Age和Expires标识定义了Cookie的有效期，既Cookie的生命周期

  • 会话期Cookie

  会话期Cookie是最简单的Cookie。游览器关闭之后Cookie会被自动删除，也就是Cookie仅在会话期内有效

  • 持久性Cookie

  持久性Cookie可以指定一个特定的过期时间(Expires)或有效期(Max-Age)

• Cookie的应用

  1. 会话状态管理(如用户登录、购物车、游戏分数记录)
  2. 个性化设置(如用户自定义设置、主题)
  3. 游览器行为跟踪(如跟踪分析用户行为)

2. 访问与更新Cookie

JS可以使用document.cookie属性来访问和更新Cookie

语法：document.cookie = newCookie

注意：此方法一次只能对一个cookie进行设置和更新

• 创建Cookie

  语法：document.cookie = newCookie

  注意：

  • 此方法一次只能对一个cookie进行设置和更新

  document.cookie = 'name = admin';
  console.log(document.cookie);
  

• 读取Cookie

  语法：allCookies = document.cookie

  allCookies = document.cookie;
  var arr = allCookies.split(';');
  for(var i=0;i<arr.length;i++){
      var cookie = arr[i];
      var cookiePair = cookie.split('=');
      console.log(cookiePair[0] + '=' + cookiePair[1]);
  }
  

• 修改Cookie

  语法跟创建一样: document.cookie = newCookie

• 删除Cookie

  删除只要设置值为空，并设置Expires标识设为以前的时间即可

  语法: document.cookie = ‘name =; expires = Thu, 01 Jan 1970 00:00:00 GMT’

3. HTTP中的Cookie

• set-Cookie响应头

  服务器使用Set-Cookie响应头部向用户代理(一般事游览器)发送Cookie消息。

  • 如：Set-cookie: <cookie名> = <值>

• Cookie请求头

  对服务器每一次发送新请求，游览器都会将之前保存的Cookie信息通过Cookie请求头再发送给服务器

  如:

  GET/sample.html HTTP/1.1

  Host: www.xyyr.com

  Cookie: yummy_cookie = choco

三. 跨域资源共享

CORS(Cross-Origin Resource Sharing)跨域资源共享，新加了一组HTTP首部字段，允许服务器声明哪些源站有权限访问哪些资源。

• 跨域资源共享标准规范要求，对哪些可能对服务器数据产生副作用的请求方法(如：搭配某些MIME类型的post请求),游览器要先使用OPTIONS方法发送一个预检请求，取得服务端是否允许该跨域请求。服务器确认了之后才能发起真的HTTP请求。
• 可以分为简单请求、预检请求和认证请求

1. 简单请求

同时满足以下三个条件就可以视为简单请求:

使用下列请求方法之一：GET、HEAD或POST

只能人为设置下列首部字段: Accept、Accept-Language、Content-Language、Content-Type

Content-Type的值只能是下列值之一:

• text/plain
• multipart/form-data
• application/x-www-form-urlencoded

• 通过请求Origin和Access-Control-Allow-Origin就能完成最简单的访问控制
  • 请求首部字段Origin表示该请求来源于那，Origin的值是每次发送请是自动携带的。
  • 响应中携带了响应首部字段Access-Control-Allow-Origin，该字段的值如果为* 则表明该资源可以被外域访问

2. 预检请求

同时满足以下三个条件就可以视为预检请求:

使用下列请求方法之一：PUT、DELETE、CONNECT、OPTIONS、TRACE或PATH

只能人为设置下列首部字段: Accept、Accept-Language、Content-Language、Content-Type

Content-Type的值只能是下列值之一:

• text/plain
• multipart/form-data
• application/x-www-form-urlencoded

• 预检请求必须先使用OPTIONS方法发起一个预检请求到服务器，获取服务器是否允许该实际要求
• 预检请求可以避免跨域请对服务器的用户数据产生未预期的影响
• 预检请的请求消息带有以下内容:
  • Access-Control-Allow-Method表示该请求使用的请求方法
  • Access-Control-Allow-Headers表示允许请求携带首部字段
• 预检请求的响应消息会带以下内容:
  • Access-Control-Allow-Methods表示允许哪些请求方法
  • Access-Control-Allow-Headers表示允许请求携带首部字段
  • Access-Control-Max-Age表示设置响应有效时间

3. 认证请求

CORS有一个特性，可以基于HTTP Cookies和HTTP认证信息发送身份凭证。一般对于跨域XMLHttpRequest请求游览器不会发送身份凭证消息，要发送凭证消息需要设置xmlHttpRequest.withCredentials = true;

• 设置完之后请求消息就会携带Cookie了