浏览器原理+跨域+解决方案

原网址：浏览器部分笔记_浏览器不同窗口cookie共享吗_JackieChan_的博客-CSDN博客

一、浏览器存储对象

1.cookie
cookie是一种纯文本文件，大小只有4kb，每次发送非跨域html请求时都会自动携带。特性如下：
cookie一旦创建，名称就无法更改
cookie的大小为4kb，一个域名下不能超过二十个
cookie默认是不能跨域名的，即a域名与b域名的cookie不共享。
若想要跨域共享cookie，可以在一个站点登录后往另一个网站写cookie，服务端把session存储到一个站点，cookie存储sessionid。

说明：cookie是一个对象，它有一些字段信息：

Name：名字
Value：值
Size：大小
Path: 可以访问该cookie的路径，如值为a，则只有该域名下路径为a的页面才能访问
Secure: 指定是否使用https协议发送cookie
Domain：可以访问该cookie的，域名，由于cookie并未严格遵循同源策略，即允许子域名可以访问或修改父域名的cookie。
HTTP：包含httponly属性，该属性设置cookie能否用脚本设置，默认为空，即可以通过脚本设置。如果设置的httponly属性，则cookie只能通过服务端设置。
Expires：cookie的超时时间，默认为session。

2.localstorage
localstorage是html5新特性，它的存储大小为5MB，可以存储更多信息。
它是持久存储，除非用户手动清除网站缓存，否则都不会消失。
它受同源策略限制，即协议、域名、端口任意一个不同都不会访问。
仅存储在本地，http请求不会自动携带

3.sessionstorage
sessionstorage与localstorage大致相同，区别在于sessionstorage只在一个窗口内共享，即在这个窗口(标签页)进行跳转、刷新，sessionstorage不会清除，但关闭这个标签页(窗口)sessionstorage会被清除。

二、什么是同源策略

同源指的是协议、域名、端口号一致，同源策略限制了同一个源加载的文档和脚本如何与另一个源的资源进行交互。主要是这几个方面：
当前域下的脚本不能访问其他域的cookie、localstorage、sessionstorage
当前域下的脚本不能操作其他域的dom节点
当前域下不能发送跨域的ajax请求。

三、如何解决跨域

1.CORS
首先请求分为简单请求和非简单请求，如果是简单请求，最少需要设置access-control-allow-origin,这个字段用来说明允许请求的源的地址。如果origin指定的域名不在范围内，则会返回一个不带有cors请求头的回应，该错误不能通过http状态码识别。
如果是非简单请求，则cors会在请求前发送一次预检请求，请求的方法是options，用于检查请求的域名、请求方式、头信息等，如果不符合则会报错。非简单请求还需要设置access-control-request-method和access-control-request-headers
2.JSONP
利用script标签没有跨域限制，通过src属性发送待有callback的get方法，注意，只能发送get请求。
3.postmessage

https://www.cnblogs.com/chenzhiyu/p/7840473.html

4.nginx反向代理
nginx就是通过监听一个端口，比如说是8080，通过判断请求路径，来代理到不同的端口，比如说请求路径为/，就是访问html页面所在的端口，访问路径为/api，就是访问服务端所在的端口，这样由于在浏览器都是一个端口内的操作，就不会产生跨域问题。

或者搞个后台网关系统，专门做转发请求用（比nginx重，且效率性能低）
5.nodejs中间件代理跨域
实质上与nginx相同，用到了html-proxy-middleware

6.浏览器事件机制
事件捕获与事件冒泡
事件捕获是由最外层元素到最内层元素，事件冒泡是由最内层元素到最外层元素，

 

在addEventListener方法中有三个参数，第一个是event,第二个是function，第三个是useCapture，这个第三个参数设置为true，则在事件捕获阶段执行，设置为false，则表示在事件冒泡阶段执行。
事件代理
事件委托本质上利用了事件冒泡机制，由于事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到子节点，因此可以把子节点的监听事件放到父节点上。

7.localstorage跨域存储原网址：https://blog.csdn.net/sinat_20203869/article/details/124124501