同源政策：协议、域名、端口均相同。
非同源限制：
cookie、localstorage、indexdb无法读取。
dom无法获取。
ajax请求无法发送。
解决方式：
一、jsonp
原理：通过动态添加一个<script>元素，向服务器请求json数据。服务器接收请求返回到指定具名回调函数。
eg:
function addscript(src) { var script = document.createelement('script'); script.setattribute(type, text/javscript); script.src = src; document.body.appendchild(script);}window.onload = function() { addscript(https://segmentfault.com/data?callback=getdata);}function getdata(data) { console.log(data)}
注意：
1、查询的url中callback需要指定回调函数的名字。
2、<script>在浏览器作为代码运行，定义的getdata函数会被立即调用。
3、返回的json参数作为javascript对象，不是字符串，不需要进行json转换。
4、jquery库的 $.getjson()也可以实现。
$.getjson(https://segmentfault.com/data?callback=?, function(data) { console.log(data)})
缺陷：是get方式获取，不支持 post。
二、window.postmessage
window.postmessage 无论是否同源都允许跨窗口通信。 postmessage 参数一是传递内容，参数二是协议+域名+端口或者（*表示不限制域名）
页面一：https://www.segmentfault.com/page1.html //传递页面<script> window.onload = function () { if (typeof window.postmessage === undefined) { alert(浏览器不支持postmessage！); } else { window.open.postmessage({data: hello world}, https://www.example.com/page2.html); } }</script>
页面二：https://www.example.com/page2.html //接收页面<script> window.addeventlistener('message', function(e) { console.log(e.data); },false);</script>
事件接收window.addeventlistener('message', function(){});中的message事件对象event有三个属性：
1、event.source：发送消息的窗口
2、event.origin: 消息发向的网址
3、event.data: 消息内容
<script> //引用父窗口发送信息给下一个窗口 window.addeventlistener('message', receivemessage); function receivemessage(event) { event.source.postmessage('nice to see you!', '*'); }</script>
<script> //过滤不是发给本窗口的信息 window.addeventlistener('message', receivemessage); function receivemessage(event) { if (event.origin !== 'http://www.segmentfault.com/page1.html') return; if (event.data === 'hello world') { event.source.postmessage('hello', event.origin); } else { console.log(event.data); } }</script>
三、iframe
iframe载入页面和src里面的目标域是同一个域，是能够发起ajax请求（父子窗口）。 //前提是同源，不同源就不可以发起ajax请求。
不同窗口同源之间是可以获取window对象，但是不能获取window对象的属性和方法。 //不同源会报错
1、document.domain + iframe（同源可用 -- 跨子域）
document.domain属性：一级域名相同，二级域名不同可以实现window对象获取。
页面一：https://segmentfault.com/page1.html<script> window.onload = function() { document.domain = https://segmentfault.com/; //设置domain window.getdata = function() { //ajax请求 } }</script>
页面二：https://segmentfault.com/page2.html<iframe id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></iframe><script> //动态创建iframe最佳，获取完数据销毁。 //document.domain设置成自身或更高一级的父域，主域必须相同。 document.domain = https://segmentfault.com/ //设置domain function test() { var win = document.getelementbyid(iframe).contentwindow; win.getdata(https://segmentfault.com/json_domain.php, function() {}) }</script>
缺陷：主域名得一致。
2、window.name + iframe（非同源可用）window.name属性：在一个窗口的生命周期内，无论是否同源，同一个窗口的载入页面window.name属性是共享的，每个页面都可以操作。
页面一：https://segmentfault.com/page1.html<script> window.name = this is data!</script>
页面二：https://segmentfault.com/page2.html<iframe id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></iframe><script> //动态创建iframe最佳，获取完数据销毁。 //获取window.name function test() { var winname = document.getelementbyid(iframe).contentwindow.name; winname.src = https://segmentfault.com/data.html; //最后需要将iframe的src设置成当前域的一个页面地址 }</script>
缺陷：兼容性不好
3、location.hash + iframe（非同源可用）片段标识符：片段标识符是指url#号后面的部分。只是改变片段标识符页面不刷新。
页面一：https://www.segmentfault.com/page1.html<script> function startrequest(){ var ifr = document.createelement('iframe'); ifr.style.display = 'none'; ifr.src = 'https://www.example.com/page2.html#messgae'; document.body.appendchild(ifr); } function checkhash() { var data = location.hash ? location.hash.substring(1) : ''; } setinterval(checkhash, 2000);</script>
页面二：https://www.example.com/page2.html#messgae<script> function callback(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全机制无法修改parent.location.hash， // 所以要利用一个中间的example域下的代理iframe var ifrproxy = document.createelement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata'; // 注意该文件在segmentfault.com域下 document.body.appendchild(ifrproxy); } }</script>
页面三：ttps:/www.segmentfault.com/page3html#somedata<script> //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1);</script>
缺点：数据暴露在url，长度也有限制。
四、websocket
websocket：浏览器通过 javascript 向服务器发出建立 websocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 tcp 连接直接交换数据。
设置websocket请求头信息，服务器支持就可以进行。
origin: http://example.com //根据域名是否在白名单内来判断是否可以通信
缺点：实现成本高。
五、cors
cors是跨域资源分享。现cors通信的关键是服务器。只要服务器实现了cors接口，就可以跨源通信。
缺点：服务器配置，占用主域带宽。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注的javascript视频教程栏目！
以上就是javascript跨域的解决方式总结（代码）的详细内容。