http详解

参考：MDN

概述

client-server 协议模式，获取网络上的资源。属于应用层，可扩展、无状态。
由http控制的几种特性：

1. 缓存，由服务端告诉客户端哪些文档需要缓存，缓存多久。
2. 同源限制，协议、域名、端口其一不同，即为非同源。
3. 认证，对发起的请求进行认证，Authenticate头部
4. 代理、隧道，想让内网网络暴露在
5. 会话，

缓存

充分用缓存，重用缓存的资源降低网络请求压力。提高用户的体验。
http缓存只对get请求类型响应的数据进行缓存。
缓存的常见案例：

1. 响应200 ，返回请求成功的文档。进行缓存。
2. 响应301,永久重定向。
3. 响应404，请求不到。
4. 响应206，不完全响应，返回局部信息。

缓存的方式对http请求头部信息进行设置：

// 禁止缓存
Cache-Control:no-store
Cache-Control:no-cache,no-store
// 确认是否使用缓存,返回304
Cache-Control:must-revalidate
// 设置缓存的权限，共有、私有。默认私有 private
Cache-Control:public
// 设置缓存的有效时间 max-age 单位秒
Cache-Control:max-age=12000000

 通过判断设置的有效时间max-age计算是否需要更新，若没有设置，服务器则检索头部If-None-Match||If-Modified-Since||Last-Modeifed判断是否过期。

前端JS、Css文件的缓存处理，可以在URL地址后加上版本号来处理缓存更新的问题；有更改时更新版本号，会重新加载。而不需要手动去清楚缓存。

使用VaryHTTP 响应头决定后续的请求头。
只有当前的请求、原始（缓存）的请求头、缓存的响应头中的Vary都匹配，才能使用缓存。

使用Vary:User-Agent，可以区分移动端or桌面端，从而进行合适的布局。

访问控制

同源策略
跨域资源共享，通诺设置请求头部，允许获取不同源资源。
要用到跨域的集中案例：

1. 跨域请求
2. CSS使用跨域字体资源
3. WebGL贴图（不懂）
   …

使用options方法发起一个预检测请求，从而获知服务端是否允许跨域请求。

请求方式

简单请求不会触发跨域预检测请求，满足所有条件时：

满足下述任意条件时，则需要发送预检测[options]请求：

预检测请求响应成功后才会开始真正的请求：

OPTIONS /getUser HTTP/1.1
...
Access-Control-Request-Method:POST                    // 预检请求方式
Access-Control-Request-Headers:X-CHECKUSER,Content-Type         // 预检请求头部信息

// 服务端响应
HTTP/1.1 200 OK
...
Access-Control-Allow-Methods: POST, GET, OPTIONS        // 允许请求的方法
Access-Control-Allow-Headers: X-CHECKUSER, Content-Type         // 允许请求的头部信息
Access-Control-Max-Age: 86400            // 设定时间内不再预检

之后进行正常的请求…

通过发送请求时携带Cookies数据对请求进行认证；服务端需要携带Access-Control-Allow-Credentials:true，否则浏览器不会将响应返回给请求者。

HTTP响应首部字段

按照字面意思理解即可。
Access-Control-Allow-Origin
允许访问的外域，或者*所有域。

如果指定所有域*，响应首部Vary必须包含Origin,对不同源返回不同的数据。

Access-Control-Expose-Headers
允许暴露的首部。
默认都是一些常规的头部，要访问其他，则需要设置该响应头。

Access-Control-Expose-Headers:X-CHECKUSER

既可以通过XMLHttpRequest对象的getResponseHeader()方法获取到X-CHECKUSER

Access-Control-Max-Age
表示预检在多长时间内有效，单位 秒
Access-Control-Allow-Credentials
如果请求携带了Cookies，需要设置是否允许浏览器返回响应数据给请求者。
Access-Control-Allow-Methods
允许的请求方法，用于预检请求的响应。
Access-Control-Allow-Headers
允许请求携带的请求头。用于预检请求的乡音。

HTTP请求头部字段

无需手动设置，请求时系统自动设置。
Origin
请求的本域源站URL
Access-Control-Request-Method
用于预检请求，表明真正请求的方法是什么。
Access-Control-Request-Headers
用于预检请求，表明请求携带的首部字段。