本篇文章给大家带来的内容是关于跨域的解决方式总结（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
同源政策：协议、域名、端口均相同。
非同源限制：
cookie、localStorage、indexDB无法读取。
立即学习“Java免费学习笔记（深入）”；
DOM无法获取。
AJAX请求无法发送。
解决方式：
一、JSONP
原理：通过动态添加一个
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、
$.getJSON("https://segmentfault.com/data?callback=?", function(data) {
console.log(data)
})缺陷：是GET方式获取，不支持 POST。
二、window.postMessage
window.postMessage 无论是否同源都允许跨窗口通信。 postMessage 参数一是传递内容，参数二是协议+域名+端口或者（*表示不限制域名）
页面一："https://www.segmentfault.com/page1.html" //传递页面
页面二："https://www.example.com/page2.html" //接收页面
事件接收window.addEventListener('message', function(){});中的message事件对象event有三个属性：
1、event.source：发送消息的窗口
2、event.origin: 消息发向的网址
3、event.data: 消息内容
三、iframe
iframe载入页面和src里面的目标域是同一个域，是能够发起ajax请求（父子窗口）。 //前提是同源，不同源就不可以发起ajax请求。
eSiteGroup站群管理系统是基于eFramework低代码开发平台构建，是一款高度灵活、可扩展的智能化站群管理解决方案，全面支持SQL Server、SQLite、MySQL、Oracle等主流数据库，适配企业级高并发、轻量级本地化、云端分布式等多种部署场景。通过可视化建模与模块化设计，系统可实现多站点的快速搭建、跨平台协同管理及数据智能分析，满足政府、企业、教育机构等组织对多站点统一管控的
不同窗口同源之间是可以获取window对象，但是不能获取window对象的属性和方法。 //不同源会报错
1、document.domain + iframe（同源可用 -- 跨子域）
document.domain属性：一级域名相同，二级域名不同可以实现window对象获取。
页面一："https://segmentfault.com/page1.html"
页面二："https://segmentfault.com/page2.html"
缺陷：主域名得一致。
2、window.name + iframe（非同源可用）
window.name属性：在一个窗口的生命周期内，无论是否同源，同一个窗口的载入页面window.name属性是共享的，每个页面都可以操作。
页面一："https://segmentfault.com/page1.html"
页面二："https://segmentfault.com/page2.html"
缺陷：兼容性不好
3、location.hash + iframe（非同源可用）
片段标识符：片段标识符是指url#号后面的部分。只是改变片段标识符页面不刷新。
页面一："https://www.segmentfault.com/page1.html"
页面二："https://www.example.com/page2.html#messgae"
页面三："ttps:/www.segmentfault.com/page3html#somedata"
缺点：数据暴露在url，长度也有限制。
四、WebSocket
WebSocket：浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
设置WebSocket请求头信息，服务器支持就可以进行。
Origin: http://example.com //根据域名是否在白名单内来判断是否可以通信
缺点：实现成本高。
五、CORS
cors是跨域资源分享。现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
缺点：服务器配置，占用主域带宽。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
