web前端解决跨域的几种办法?

一.什么是跨域

一个域名地址的组成:

当 传输协议 域名 端口号中任意一个不相同时,都算作不同域.不同域之间相互请求资源,叫做"跨域"

注:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是被浏览器拦截了.之所以会跨域,是受到了同源策略的影响.

二.什么是同源策略

同源策略/SOP(Same origin policy)是一种约定(浏览器给的一种行为)由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。

同源策略限制内容有：

Cookie、LocalStorage、IndexedDB 等存储性内容

DOM 节点

AJAX 请求不能发送

但是有三个标签是允许跨域加载资源：

接下来我们讨论下有哪些处理跨域的方法。但所有的跨域都必须经过信息提供方的允许。如果未经允许即可获取，那是浏览器同源策略出现漏洞。

三.处理跨域的方法一:JSONP

1.JSONP原理

利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2.JSONP的流程(以第三方API地址为例，不必考虑后台程序)

声明一个回调函数，其函数名(如fn)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。

创建一个

服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如：传递进去的函数名是fn，它准备好的数据是fn([{“name”:“jianshu”}]）。

最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（fn），对返回的数据进行操作。

其中 fn 是客户端注册的回调的函数,目的获取跨域服务器上的json数据后，对数据进行在处理。

最后服务器返回给客户端数据的格式为:

3.JSONP和AJAX对比

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）

4.JSONP优缺点

JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。**缺点是仅支持get方法具有局限性。**且安全性也不是很好。

四.处理跨域的方法二:CORS

1.CORS原理

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2.CORS优缺点

CORS要求浏览器(>IE10)和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。

优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。

只需要在服务器端做一些小小的改造即可：

在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

五 ngix反向代理