前端开发的历史年轮
谈谈你对跨域的理解
跨域主要分3部分：
只要有一个不同，那么就是跨域
同源的目的
目的是为了保护用户信息的安全，防止恶意网站窃取数据，否则Cookie可以共享。有的网站一般会把一些重要信息存放在cookie或者LocalStorage中，这时如果别的网站能够获取获取到这个数据，可想而知，这样就没有什么安全可言了。
限制范围
主要这3种方式不行。
比较常见的就是nodejs配置CORS允许跨域。
2. Access-Control-Allow-Credentials
3. Access-Control-Expose-Headers
4. Access-Control-Request-Method
5. Access-Control-Request-Headers
现在主流三大框架，react，vue，argular都使用了webpack进行工程化。在本地开发最常见的就是proxy代理，解决跨域。
主要原理是：客户端像服务器请求数据。webpack-dev-server会再本地创建一个web服务，这个服务会和客户端同源。本地服务实际上是一个node服务，它作为一个中间层会帮客户端去像服务端请求数据，然后把数据返回给客户端。
主要原理：link，script这种是不会跨域的。所以，前端代码写一个script src = http://localhoost:80/list?callback=func，把这个链接发送给服务端。但是传递给服务端的函数必须是一个全局的函数。服务端接受到请求后，会把callback这个值，返回给客户端。客户端获取到服务端返回的指定格式字符串。发现其实就是本地的func全局函数执行，并且把数据传递给这个函数。
但是这种方式有一个弊端，那就是只能get请求，而且不安全，只要服务端支持，谁都可以调用。
下面手写一个JSONP的实现
这是后端需要做的，其实我也不是很熟悉，大致配置方式。
什么是代理？
既然是代理跨域，那么代理(Proxy Server)就是一个很重要的点，这里的代理说的服务器代理，是一种很重要的服务器安全功能，也是一种很常见的设计模式，来隔绝不同的模块，解耦模块。
为什么代理是反理？
nginx就能够把用户的请求分发到空闲的服务器上，然后服务器返回自己的服务到负载均衡设备上，然后负载均衡的设备会讲服务器的服务返回给用户，所以我们并不知道为什么服务的是哪一台服务器发送出来的，这就很好的隐藏了服务器。有一句精辟的话是这么说的：“反向代理就是流量发散状，代理是流量汇聚状。”
A.html
B.html
原理：也是利用iframe可以在不同域中传值的特点，而location.hash正好可以携带参数，所以利用iframe作为这个不同域之间的桥梁。
A域名页面
B域名页面
缺点
原理其实是和上面的方法一样，区别在于window.name能够传递2MB以上的数据。
A域名页面
B域名页面
等等其他处理方式
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/185818.html