在前端的JS请求中，跨域的问题经常存在，根据不同的实现原理，常见的跨域的方法如下：
一：前端的方式
1:在前端页面中，可以直接引用跨域资源的标签有三个，分别是img的src，style的href和script的src。这三个都可以直接引用外域的资源。
在img和style的请求中，可以直接通过请求的地址加后缀参数进行参数传递，但是没有接受服务器返回的操作。
在script的src可以通过和服务器端的配合实现数据的传递与返回，稍后讨论
2:其他前端的跨域方式
2.1:document.domain方式，同源策略，在考虑跨域问题的时候，如果两个页面拥有相同的主域但是子域不同，则可以通过document.domain的修改实现两者相同域的实现。在修改的时候注意只能修改为与当前相同的域或者父级的域。而且必须是一个符合格式的domain。
2.2:window.name跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
比如有一个www.domain1.com/receive.html页面,需要通过receive.html页面里的js来获取另一个位于不同域上的页面www.domain2.com/data.html里的数据。
data.html页面里的代码很简单，就是给当前的window.name设置一个receive.html页面想要得到的数据值。data.html里的代码：
window.name="I am the data";
那么在receive.html页面中，我们怎么把data.html页面载入进来呢？显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面，因为我们想要即使receive.html页面不跳转也能得到data.html里的数据。答案就是在receive.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。
充当中间人的iframe想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为www.domain2.com/data.html就行了。然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，还必须把这个iframe的src设成跟receive.html页面同一个域才行，不然根据前面讲的同源策略，receive.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。
2.3:postMessage
postMessage是Html5新增的处理跨域问题的API，postMessage(data,origin)接受两个参数。
1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
操作示例：
<div>
<div id="color">Frame Color</div>
</div>
<div>
<iframe id="child" src="http://domain2.com/test.html"></iframe>
</div>
在domain1中通过如下方法调用postMessage接口
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}
接受的时候监听Window的message事件：
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=e.data;
console.log(e.data);
}
二：后端的方式
在后端处理的过程中，服务器通过Access-Control-Allow-Origin可以设置那些域可以访问当前资源，如果要开放给所有的域访问，则直接设置为*即可。
优点是浏览器端不用考虑同源策略的限制，缺点就是增加服务器的负担，且访问速度慢。
三：前后端的方式
这里涉及到的就是我们经常说道的JSONP的方式，JSONP是通过前后端配合的方式实现跨域的实现，前端采用的是基于Script的实现，通过动态的创建script标签，将要请求数据的参数和回调函数写在src 的参数中。服务器收到请求之后，按照对应的参数和回调函数返回对应的结果，
示例如下：
假如当前我们的网站www.our.com想获取12306的某一辆车的余票情况，我们客户端如下构造：
function getInfoCallback(data){
console.log(data);
}
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src="http://www.12306.com/getLeftTicket?id=k58&callback=getInfoCallback;
然后12306那边按照我们传递的参数和回调函数返回如下的script内容：
getInfoCallback({
id: "k58",
left: 123
})
当script收到返回的内容相当于直接调用当前页面的函数，以此可以达到跨域的功能。
网友评论