详解跨域及解决方式

一、什么是跨域和同源策略

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。有一点必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，如果是协议和端口造成的跨域问题“前台”是无能为力的。第二：在跨域问题上，域仅仅是通过“协议, 域名和端口必须匹配”来识别而不会根据域名对应的IP地址是否相同来判断。

同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的关键的安全机制。cookie、localStorage和indexDB无法读取，DOM无法获得，AJAX请求不能发送。

二、处理跨域的两种方式

1、利用nginx解决跨域问题

从上一节的介绍我们可以知道跨域会产生问题，我们不跨越不就可以了

利用nginx监听80端口

nginx的配置，

##当用户发送localhost:80/时会被nginx转发到http://localhost:81服务；

##当界面请求接口数据时，只要以/a为开头，就会被nginx转发到后端接口服务器上；

总结：nginx实现跨域的原理，实际就是把前端项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器（真正使用的服务器）；

2、JSONP

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

JSONP与Ajax一样都是从客户端向服务器发送请求，从服务器获取数据，Ajax属于同源策略，JSONP属于非同源策略（跨域）。

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

jQuery的JSONP形式

JSONP都是GET和异步请求的，不存在其他的请求方式和同步请求，且jQuery默认就会给JSONP的请求清除缓存。

$.ajax({

url:"http://www.wulj.club/article/12",

dataType:"jsonp",

type:"get",

jsonp:"jsonp",

success:function (data){

console.log(data);}

});

以上两种跨域解决方式是本人在实际项目应用中使用到的，可能还会有别的方式，因为我不熟，没有编写，如果您觉着有那种方式比较好，也可以发给我，我会在更新上去，请多多支持！！！