前端跨域的几种方式

　　在实际开发中，前端和后端之所以存在跨域的问题，主要是受到了 “同源策略”的限制，“同源”一般是指： 协议、域名（主域名以及子域名）和端口号三者相同，三者中的任何一个不相同都算作是跨域，不同域之间的相互请求资源就算作是跨域，这样都是会被限制的；之所以设置同源策略的限制主要是为了避免浏览器受到xss、CSFR等的攻击；同源策略限制的内容有： Cookie、LocalStorage、IndexdDB等存储数据，Dom节点，AJAX请求发送后，被浏览器的拦截；但是，img标签中的src、link中的href以及script中的src是允许跨域加载资源的；

 

　　需要注意的是，如果是协议和端口造成的跨域问题，前端是无能为力的，只能通过服务器的配置来解决；其次，在跨域问题上，仅仅是通过“url的首部”来识别而不会根据域名对应的IP地址来判断，也就是根据域名，协议，端口来判断； 

 

　　跨域并不是请求发布出去，请求是能发出去的，服务器是能够收到请求并且正常的返回结果的，只是结果被浏览器给拦截了；

　　

跨域的解决方案

　　1、jsonp原理

　　　　利用script标签没有跨域限制的漏洞，网页可以得到从其他源动态产生的json数据。 JSONP请求一定需要对方的服务器做支持才可以；JSONP主要是通过声明一个回调函数，然后利用script的src属性后边跟上 ？callback=声明的回调函数，来进行数据处理，使用起来非常的简单和方便，而且可用于解决主流浏览器的跨域数据访问问题；但是，它仅仅只是支持get方法，具有一定的局限性，而且不安全，容易受到xss攻击；

　　2、cors 

　　　　cors需要浏览器和后端同时支持。IE8和IE9需要通过XDomainReauest来进行实现；

　　　　其实浏览器本身是会自动的进行cors通信的，因此，实现cors通信的关键是后端，后端需要对请求头的配置，也就是 Access-Control-Allow-Origin的配置，只要后端实现了cors，那么跨域的问题就解决了；

　　3、nginx反向代理

　　　　nginx反向代理跨域的实现原理主要是利用了服务器之间不存在跨域来进行实现的，类似于我们构建的node 本地服务器进行跨域； nginx反向代理的实现就是，通过nginx 配置一个代理服务器（域名与domain1相同，端口不同）作为跳板机，反向代理访问domain2的接口，并且可以顺便修改cookie中的domain信息，便于当前域的写入，进而来实现跨域登录；

　　4、node 服务器作为中间代理进行跨域

　　　　同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略；

　　5、postMessage

　　　　postMessage是 HTML5 XMLHttpRequest Level2 中的api，而且是为数不多可以跨域操作的 window 属性之一，它可用于解决以下方面的问题，（1）页面和其他打开的新窗口的数据传递； （2）多窗口之间的消息传递； （3）页面与嵌入的iframe消息传递；   postMessage（）方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递；

 

　　6、websockrt 

　　7、window.name + iframe

　　8、location.hash + iframe

　　9、document.domain + iframe