跨域解决方案（cors跨域解决方案）



前端开发的历史年轮

谈谈你对跨域的理解

跨域主要分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域名页面

等等其他处理方式

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/64341.html