跨域是web开发中经常会遇到的情况，只出现在浏览器端。本文列举了一些常见的跨域情况，和解决方案。
什么是跨域，为什么会有跨域？
首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制。
如 a.com 下的js 无法和b.com 的js通信。这是浏览器为了安全而设定的策略
只有域名相同才不会有跨域的情况。
以下情况都会出现跨域：
a.com 和 b.com 不同域名
www.a.com 和 a.com 不同二级域名
a.com 和 a.com:3000 不同端口
http://a.com 和 https://a.com 不同协议
app.a.com 和 pc.a.com 不同二级域名
以上可见 只有域名严格一致才不会出现跨域
特别注意两点：
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，只能通过后台代理。这里不细说。
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。"URL的首部" 指 https:// (协议）www.myweb.com(域名) :8080(端口)
常见的情况和解决方案
1.jsonp 跨域访问接口
// 在a.com下
$.ajax({
url: 'b.com/getjson'?cb=?$a=1&b=2, // cb=? jquery的jsonp 会把此处的？
type: 'jsonp', //替换为jsonpCallback
jsonpCallback:'jsonpCallback', // 发出的请求为b.com/getjson'?cb=jsonpCallback$a=1&b=2
success:function(data){
console.log(data)
}
})
jsonp的原理：
虽然js是受到同源策略，但是引用js文件，img，css文件是不会受到限制的。聪明的你此时是否已经知道了答案。
没错原理就是动态创建script。jquery在发请求前生产了一个jsonpCallback函数。然后向b.com请求了一个js文件
服务器根据cb的值返回一个jsonpCallback(jsonDate);即这个js文件被浏览器解析后执行了之前定义的函数。
这种方法非常常见，方便好用。
缺点是
1.需要后端配合提供jsonp接口。
2.因为是动态创建script标签，所以只能get，不能post。 安全性要大大低于post，不适合发送机密信息。
2.document.domain+iframe的设置
对于主域相同而子域不同的例子
如在a.com 页面里有一个 pc.a.com 的iframe
我们只要在2个页面里都设置 document.domain = 'a.com';
代码如下：
var ifr = document.createElement('iframe');
ifr.src = 'http://pc.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在这里操纵b.html
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信
注意：
0、document.domain 不能改变主域。a.com 不能设为b.com 。
1、安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。
2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。
3、利用iframe和location.hash
1、a.com a页面 监听自己的hashchange
2、a页面中的ifame b.com下的b页面 改变parent的hash
3、b.com 不能直接改变a.com 的hash时 需要引入a.com 中的c页面#mydata
4、因为c页面和a页面同源 所以c页面可以
parent.parent.location.hash = self.location.hash.substring(1);
来改变a页面的hash
ok
4、window.name实现的跨域数据传输
function crossDomainPost() {
// Add the iframe with a unique name
var iframe = document.createElement("iframe");
var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
document.body.appendChild(iframe);
iframe.style.display = "none";
iframe.contentWindow.name = uniqueString;
// construct a form with hidden inputs, targeting the iframe
var form = document.createElement("form");
form.target = uniqueString;
form.action = "http://INSERT_YOUR_URL_HERE";
form.method = "POST";
// repeat for each parameter
var input = document.createElement("input");
input.type = "hidden";
input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
5、使用HTML5 postMessage
Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+都支持这个功能
otherWindow.postMessage(message, targetOrigin);
otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制
a.com/index.html中的代码：
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样
// 若写成'http://c.com'就不会执行postMessage了
ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
b.com/index.html中的代码：
<script type="text/javascript">
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://a.com') {
alert(event.data); // 弹出"I was there!"
alert(event.source); // 对a.com、index.html中window对象的引用
// 但由于同源策略，这里event.source不可以访问window对象
}
}, false);
</script>
