-
http 缓存
通过对比F5和Ctrl+F5的区别来看请求头配置对缓存的影响。
image.png
image.png
image.png
image.png
image.png
- 跨域请求
2.1 CROS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
CORS需要服务器和浏览器两侧的支持，IE10以上、chrome、fixfox都支持CORS，要实现跨域请求，主要是服务器进行配置。
针对不同的请求，浏览器的处理策略不同。据此，请求类型分为简单请求和非简单请求。
简单请求：同时满足以下两大条件的请求。
- 请求方法是以下三种方法之一：
HEAD、GET、POST - HTTP的头信息不超出以下几种字段：
Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
简单简求：浏览器会自动在requestHeaders中添加一个Origin字段，服务器根据这个值判断是否在可许范围。如果在，在返回响应，responseHeaders增加几个字段：
Access-Control-Allow-Origin、Access-Control-Allow-Credential：该字段表明，服务器允许发送cookie，因为CORS请求默认不发送Cookie和HTTP认证信息。在浏览器端也需要配置：原生ajax——xhr.withCredentials = true;在axios中可以添加参数——withCredentials:true、Access-Control-Expose-Headers、Content-Type
非简单请求：凡是不同时满足上面两个条件，就属于非简单请求。
如：PUT、DELETE和Content-Type字段的类型是application/json的请求。
非简单请求：
在发送正式请求之前，浏览器会自动发送一个预检请求，预检请求类型为options，在request-headers中会添加如下字段：Origin、Access-Control-Request-Method：表明正式请求的方式、Access-Control-Request-Headers：请求头中额外需要携带的参数。
如果服务器允许跨域请求，则会返回，在response-headers中会有如下字段：
Access-Control-Allow-Method：允许使用的方法、
Access-Control-Allow-Headers：允许额外携带的头信息、
Access-Control-Allow-Credential：是否允许携带cookie、
Access-Conrol-Allow-Origin：允许的源、
Access-Control-Max-Age：有效期，在有效期内不会重复发送预检请求。
如果服务器不允许，还是会返回正常的HTTP相应，只是response-headers中没有CORS的相关信息，浏览器会因此触发一个Error，会被XMLHttpRequest的错误回调捕捉。
image.png
通过预检之后，会像发送简单请求那样发送正式的请求。如下：
image.png
2.2 jsonp
Jsonp也可以解决跨域问题，但是只可以发送get请求。优点是支持老版本浏览器，并且可以向不支持CORS的服务器发送跨域请求。
- 跨域共享
同源：协议相同、域名相同和端口相同的网页。
3.1 一级域名相同但二级域名不同。不同源的网页是不能共享cookie的。跨域窗口如 iframe和window.open打开的窗口，不同源拿不到DOM，也无法与父窗口通信可以根据如下方式稍微突破同源限制：
一级域名相同但二级域名不同，协议域名相同但端口不同，可以使用document.domain来指定域名获取。
3.2 完全不同源的网页，如何解决跨域通信问题？
- 哈希/片段标识符，即URL中#后面的部分。通过监听hashchange事件得到通知，拿到数据。
- window.name：只要在同一个网页，前一个网页设置了window.name后，后一个网页就可以获取到window.name
- HTML5新API，跨文档通信（Cross-Document messaging）。Window对象使用postMessage(arg1,arg2)可以发送信息，第一个参数为消息，第二个参数为目的源。
通过监听message来获取对方消息。
// e中有三个参数：e.source、e.origin、e.data
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
- 路由之history模式
使用popstate来监听活动历史记录的变化。
注意：pushState和replaceState不会触发popstate事件。浏览器的前进、回退按钮，history.back、history.forward和history.go会触发popstate方法。
网友评论