跨域#

常用的跨域解决方案#

CORS 跨源资源共享#

CORS (跨源资源共享) 是 HTTP 的一部分，它允许浏览器向跨源服务器发出 XMLHttpRequest 请求，从而解决了 AJAX 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持，目前所有浏览器均已支持，只需服务器配置即可使用

浏览器将 CORS 请求分成两类: 简单请求和非简单请求

简单请求#

简单请求基本流程#

1. 浏览器会直接发出 CORS 请求并在请求头信息之中增加一个 Origin 字段(用来说明本次请求来自哪个源(协议 + 域名 + 端口))
2. 服务器判断 Origin 字段决定是否同意这次请求
3. 通过请求会在响应头增加 CORS 相关的字段(以Access-Control-开头)
4. 拒绝请求时不会增加 CORS 相关的字段，浏览器会抛出异常

非简单请求#

非简单请求是那种对服务器有特殊要求的请求，如请求方法是 PUT 或 DELETE，或者 Content-Type 字段的类型是 application/json。 非简单请求会在正式通信之前增加一次 HTTP 查询请求，称为预检请求，用于获取服务器是否允许该实际请求，同时避免跨域请求对服务器的用户数据产生预期之外的影响

一旦服务器通过了预检请求，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样会有一个 Origin 头信息字段。服务器的回应也都会有一个 Access-Control-Allow-Origin 头信息字段

参考资料 —— 跨域资源共享 CORS 详解

JSONP#

JSONP 是利用 <script> 标签没有跨域限制的漏洞，当前源可以得到从其他来源动态产生的 JSON 数据

JSONP 请求过程流程

1. 前端定义一个解析的回调函数
2. 创建 script 标签，其 src 指向接口地址并拼接好参数和回调函数名
3. 后端处理数据并将其拼接到前端传入的回调函数中(拼接好的数据必须是一个合法的 JavaScript 脚本 )
4. 浏览器执行后端返回的 JavaScript 脚本代码(调用定义好的回调函数)并删除刚创建的 script 标签

1function normalizeParams(params) {
2  if (!params)
3    return ''
4
5  return Object.keys(params)
6    .map(key => `${key}=${params[key]}`)
7    .join('&')
8}
9
10function jsonp(url, params) {
11  return new Promise((resolve) => {
12    const callback = `jsonp_${Date.now()}`
13    window[callback] = function (data) {
14      resolve(data)
15      document.body.removeChild(scriptEle)
16    }
17    params.cb = callback
18    const scriptEle = document.createElement('script')
19    scriptEle.src = `${url}${url.includes('?') ? '&' : '?'}${normalizeParams(params)}`
20    document.body.appendChild(scriptEle)
21  })
22}
23
24jsonp('https://www.baidu.com/sugrec', {
25  prod: 'pc',
26  wd: '跨域',
27}).then((res) => {
28  console.log(res)
29})

了解更多跨域解决方案请点击 —— 10 种跨域解决方案

浏览器缓存机制#

• 1. 浏览器在发送请求前先判断是否命中强缓存
  • 命中则不发送请求直接使用缓存，否则进行下一步
• 2. 浏览器发送请求后会由服务器判断是否命中协商缓存
  • 命中则从缓存获取资源，否则进行下一步
• 3. 浏览器直接使用服务器返回的资源并更新缓存

强缓存（200 OK）#

• Expires 是服务器告诉浏览器的缓存过期时间（值为 GMT 时间，即格林尼治时间）
  • HTTP1.0 的产物
  • 受本地时间影响
  • 设置的值为 max-age=xxx（xxx 是 秒）
• Cache-Control 用于控制缓存的行为
  • 是 HTTP1.1 的产物
  • 取值
    • public：允许被客户端和代理服务器缓存
    • private：只允许被客户端缓存（默认值）
    • no-cache：允许被客户端和代理服务器缓存，但在使用缓存时需要经过协商缓存来验证决定
    • no-store：所有内容都不会被缓存，即不使用强制缓存也不使用协商缓存每次请求都会下载完整的资源
    • maxage=xxx：设置客户端和代理服务器的缓存时间，表示缓存内容将在 xxx 秒后失效
    • s-maxage=xxx：设置代理服务器的缓存时间（优先级比 max-age 高）

缓存位置#

• 内存缓存（memory cache）
  • 快速读取（内存缓存将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取）
  • 进程关闭时数据会被清除
  • 不请求网络资源，资源存在内存中一般 JS 和图片文件会存入内存
  • 状态码：200（from memory cache）
• 硬盘缓存（disk cache）
  • 写入硬盘文件进行 I/O 操作
  • 进程关闭时数据不会被清除
  • 速度比 memory cache 慢
  • 不请求网络资源，资源存在磁盘中一般非脚本会存在磁盘中，如 css
  • 状态码：200（from disk cache）
• 代理服务器缓存（server worker）
  • 可以拦截处理页面的所有网络请求
  • 仅 HTTPS 下可用、存在兼容问题
  • 状态码：200（from service worker）

协商缓存（304 Not Modified）#

Last-Modified 和 If-Modified-Since#

Last-Modified 表示资源的最后修改时间，值为 GMT 格式时间字符串，精确到秒

• 浏览器第一次请求时，服务器会在响应头中返回请求资源的上次更新时间 Last-Modified
• 当浏览器再次请求时，会在请求头中携带 If-Modified-Since 值为上次请求返回的 Last-Modified
• 服务器收到请求后，会根据请求头中的 If-Modified-Since 和该资源在服务器的最后被修改时间做对比
  • 大于 If-Modified-Since 重新返回资源文件，状态码为 200
  • 小于 If-Modified-Since 资源无更新继续使用缓存文件，状态码为 304

ETag 和 If-None-Match#

ETag 是服务器通过算法对资源内容计算出的一个唯一标识（文件 hash）其有强弱之分

• 强 Etag
  • ETag: "<etag_value>"
  • 资源发生任何改变都会立刻更新
  • 难生成，利于比较
• 弱 Etag（使用 W/ 标识）
  • ETag: W/"<etag_value>"
  • 只在资源发生本质变化时更新
  • 易生成，不利于比较

过程#

• 浏览器第一次请求时，服务器会在响应头中返回当前资源文件的一个唯一标识 ETag
• 当浏览器再次请求时，会在请求头中携带 If-None-Match 值为上次请求返回的 ETag
• 通过接收的 ETag 和服务器重新生成的 ETag 进行对比
  • 不一致 重新返回资源文件，状态码为 200
  • 一致 资源无更新继续使用缓存文件，状态码为 304

应用场景#

用户行为对缓存的影响#

• 地址栏输入
  • 查找 disk cache（磁盘缓存）中是否有匹配，有则使用缓存，没有则发送网络请求
• 普通刷新（F5）
  • 因为浏览器 tab 标签并没有关闭，因此 memory cache （内存缓存）是可用的，会被优先使用，其次使用 disk cache（磁盘缓存）
  • 跳过强缓存规则，直接走协商缓存
• 强制刷新（Ctrl + F5）
  • 浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache （为了兼容还带了 Pragma: no-cache）服务器直接返回 200 和最新内容。
  • 跳过所有缓存规则

浏览器存储#

Cookie#

Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能，Cookie 在存储时是以键值对的形式存在的

Cookie 主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

Cookie 的本职工作并非本地存储，而是“维持状态”，因当时并没有其它合适的存储办法而作为唯一的存储手段，所以会用其进行本地存储

Cookie 的生成和使用#

• 服务器生成，通过 http response header 中的 set-cookie
• 在 JavaScript 中使用 document.cookie 进行读写

1/* 读取 */
2document.cookie
3
4/* 写入 */
5document.cookie = 'name=h7ml'

Web Storage#

Web Storage是 HTML5 专门为浏览器存储而提供的数据存储机制，其大小限制为 5MB ~ 10MB (去查看当前浏览器下 Web Storage 的容量限制)，数据仅保存在客户端不与服务器进行通信

Web Storage 提供了两种机制供我们使用

• Local Storage(本地存储)
• Session Storage(会话存储)

API 使用#

以 localStorage 为例

1/* 存储数据 setItem() */
2localStorage.setItem('name', 'h7ml')
3
4/* 读取数据 getItem() */
5localStorage.getItem('name')
6
7/* 删除指定数据 removeItem() */
8localStorage.removeItem('name')
9
10/* 清空数据 clear() */
11localStorage.clear()

IndexedDB#

IndexedDB 是一个运行在浏览器上的非关系型数据库，用于在客户端存储大量结构化数据

API 使用#

打开/创建一个 IndexedDB 数据库，并指定数据库的版本号 (版本号只能为整数)

1const request = window.indexedDB.open('myDatabase', 1)
2let db
3
4// 成功回调
5request.onsuccess = function (event) {
6  // 获取 indexedDB 实例
7  db = event.target.result
8  // 也可以使用 request.result 获取 indexedDB 实例
9  console.log('连接 IndexedDB 成功')
10}
11
12// 失败回调
13request.onerror = function () {
14  console.log('连接 IndexedDB 失败')
15}

创建一个对象仓库(类似于数据库中的表)

1// upgradeneeded 事件会在初始化数据库或版本发生更新时被调用
2request.onupgradeneeded = function (event) {
3  const db = event.target.result
4  // 创建对象仓库并指定主键
5  const objectStore = db.createObjectStore('userInfo', {
6    keyPath: 'id',
7    autoIncrement: false,
8  })
9  console.log('创建对象仓库成功')
10
11  /**
12   * 定义存储对象的数据项
13   * 第一个参数是创建的索引名称，可以为空
14   * 第二个参数是索引使用的关键名称，可以为空
15   * 第三个参数是可选配置参数，可以不传，常用参数之一就是 unique ，表示该字段是否唯一，不能重复
16   */
17  objectStore.createIndex('id', 'id', {
18    unique: true,
19  })
20  objectStore.createIndex('name', 'name')
21}

添加数据

1// 创建事务指并定表格名称和读写权限
2const transaction = db.transaction(['userInfo'], 'readwrite')
3// 获取 Object Store 对象
4const objectStore = transaction.objectStore('userInfo')
5
6/* 添加数据 */
7objectStore.add({ id: 1, name: 'test' })

获取数据

1const transaction = db.transaction(['userInfo'], 'readonly')
2const objectStore = transaction.objectStore('userInfo')
3
4const objectStoreRequest = objectStore.get(1)
5objectStoreRequest.onsuccess = function () {
6  console.log('获取数据', objectStoreRequest.result)
7}

修改数据

1const transaction = db.transaction(['userInfo'], 'readwrite')
2const objectStore = transaction.objectStore('userInfo')
3
4const objectStoreRequest = objectStore.get(1)
5objectStoreRequest.onsuccess = function () {
6  const data = objectStoreRequest.result
7  data.name = 'h7ml'
8  objectStore.put(data)
9}

删除数据

1const transaction = db.transaction(['userInfo'], 'readwrite')
2const objectStore = transaction.objectStore('userInfo')
3
4const objectStoreRequest = objectStore.delete(1)
5objectStoreRequest.onsuccess = function () {
6  console.log('删除成功')
7}