跨域的几种方式

同源策略

同源策略中的源指的是URL,比如说，对于一个完整的URLhttp://www.jianshu.com:80/p/bc7b8d542dcd#sample?query=text

这里的同源指的是URL中prototype协议、host域名、port端口这三个部分相同。简单来说，同源策略就是浏览器出于安全性的考虑，限制不同源之间的资源相互访问的一种政策。
如果缺少同源策略，浏览器很容易受到XSS、CSRF等攻击。

缺少同源策略会发生什么？

1.场景一
A网站是一家银行，用户登录之后，又去浏览其他网站。如果其他网站可以读取A网站的Cookie，如果Cookie中包含隐私（存款总额），这些信息就会被泄漏。
2.场景二
Cookie往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。

以下操作具有同源策略的限制

不能向不同源的服务器发送ajax请求
无法获取不同源的DOM元素并进行操作
无法读取不同源的Cookie、LocalStorage和IndexDB

但是有些请求不会受到跨域限制。例如：WebSocket，script，img，iframe，video，audio标签的src属性

跨域解决方案

1.通过jsonp跨域
2.跨域资源共享（CORS）
3..nginx代理跨域
4.Websocket协议跨域

一、通过jsonp跨域

通常为了减轻服务器的负载，我们把js、css、img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参数的网址实现跨域通信。
1.原生js

var script = document.createElement('script');
script.type = 'text/javascript';

//传参并制定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

//回调执行函数
function onBack(res){
    alert(JSON.stringify(res));
}

//服务器返回如下（返回时即执行全局函数
onBack({"status":true,"user":"admin"});

2.jquery ajax

var script = document.createElement('script');
script.type = 'text/javascript';

//传参并制定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

//回调执行函数
function onBack(res){
    alert(JSON.stringify(res));
}

//服务器返回如下（返回时即执行全局函数
onBack({"status":true,"user":"admin"});

jsonp的缺点就是：只能实现get一种请求

二、跨域资源共享（CORS）

CORS机制把跨域请求分为两类：简单请求和非简单请求
满足下面这两个条件的是简单请求：
1.请求方法是HEAD,GET,POST这三个之一
2.HTTP的头部信息不超出以下几种字段。
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data，text/plain
凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。
对简单请求：浏览器会带上Origin的请求头发送给服务器，服务器会根据Origin判断是否许可。如果许可就会带上CORS相关的响应头，如果不在许可范围内就不会带上CORS相关的响应头。浏览器再根据响应头中是否有相关的CORS响应头，来判断拦截响应body和抛出错误。
对于非简单请求：非简单请求会在发真正的请求之前发送一个OPTIONS的带着Origin、Access-Control-Request-Method（请求自身使用的方法），Access-Control-Request-Headers（可选）自定义的头部信息，多个头部以逗号分隔）等CORS相关的请求头的预检请求到服务器，服务器确认可以这样请求，就会返回带着Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等CORS相关的响应头的响应，浏览器检查到相关的CORS响应头，说明通过预检可以继续发送真正的请求；服务器确认不可以，则不会返回这些相关响应头，浏览器没检查到CORS的响应头就会抛出错误。

三、代理跨域

原理解析：跨域请求报错归根是浏览器禁止使用XHR对象向不同源的服务器地址发起HTTP请求。如果服务器跨域向多个不同的服务器发送请求就不会有跨域问题存在。因此我们可以让浏览器只向一个服务器方式请求，让这个服务器代替浏览器去不同的服务器上请求资源再返回浏览器，这个服务器就是代理服务器。

常用代理服务器nginx

什么是ngnix：是一款轻量级的web服务器、反向代理服务器及电子邮件代理服务器
反向代理服务器对于客户端而言就像是原始服务器，并且客户端不需要进行任何特别的设置。反向代理方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端。
既然讲到反向代理，就会有正向代理。
什么是正向代理呢：正向代理是位于客户端和原始服务器之间的服务器。为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标（原始服务器），然后代理向原始服务器转交请求并将获得的内容返回给客户端。