跨域的原理和解决方案以及 Cookie、sessionStorage、localStorage 的区别

跨域

1、跨域的原理
- 跨域：是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
- 同源策略：是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。
- 跨域原理：即是通过各种方式，避开浏览器的安全限制。
2、解决方案
1）JSNP 缺点是只支持 get

//动态创建 script
var script = document.createElement("script");

// 设置回调函数
function getData(data) {
  console.log(data);
}

//设置 script 的 src 属性，并设置请求地址
script.src = "http://localhost:3000/?callback=getData";

// 让 script 生效
document.body.appendChild(script);

2）CORS
- CORS(Cross-origin resource sharing)跨域资源共享
- 服务器设置 Access-Control-Allow-Origin HTTP 响应头之后，浏览器将会允许跨域请求。
3）proxy 代理
- 通俗点说就是客户端浏览器发起一个请求会存在跨域问题，但是服务端向另一个服务端发起请求并无跨域，因为跨域问题归根结底源于同源策略，而同源策略只存在于浏览器
  - 那么我们是不是可以通过 Nginx 配置一个代理服务器，反向代理访问跨域的接口，并且我们还可以修改 Cookie 中 domain 信息，方便当前域 Cookie 写入
4）Websocket

Vue-Cli 代理

当你请求 http://localhost:8080/api/abc 接口时就会被代理到 http://www.hahaha.com/api/abc

module.exports = {
  //...
  devServer: {
    proxy: {
      "/api": "http://www.hahaha.com",
    },
  },
};

cookie 数据大小不能超过 4k；sessionStorage 和 localStorage 的存储比 cookie 大得多，可以达到 5M+
cookie 设置的过期时间之前一直有效；localStorage 永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 的数据会自动的传递到服务器；sessionStorage 和 localStorage 数据保存在本地