本篇文章给大家带来的内容是关于跨域的解决方式总结（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 同源政策：协议、域名、端口均相同。 非同源限制： cookie、localStorage、indexDB无法读取。 DOM无法获取。 AJAX请求无法发送。 解决方式： 一、JSONP 原理：通过动态添加一个元素，向服务器请求JSON数据。服务器接收请求返回到指定具名回调函数。</p> <p>eg:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>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) }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>注意：<br>1、<strong>查询的Url中callback需要指定回调函数的名字。</strong><br>2、<script>在浏览器作为代码运行，定义的getData函数会被立即调用。<br>3、返回的JSON参数作为javascript对象，不是字符串，不需要进行JSON转换。<br>4、jquery库的 $.getJSON()也可以实现。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$.getJSON("https://segmentfault.com/data?callback=?", function(data) { console.log(data) })</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>缺陷：<strong>是GET方式获取，不支持 POST。</strong></p> <p style="white-space: normal;"><strong>二、window.postMessage</strong></p> <p>window.postMessage 无论是否同源都允许跨窗口通信。 postMessage 参数一是传递内容，参数二是协议+域名+端口或者（*表示不限制域名）</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>页面一："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"); } } Salin selepas log masuk 页面二："https://www.example.com/page2.html" //接收页面 window.addEventListener('message', function(e) { console.log(e.data); },false); Salin selepas log masuk 事件接收window.addEventListener('message', function(){});中的message事件对象event有三个属性：1、event.source：发送消息的窗口2、event.origin: 消息发向的网址3、event.data: 消息内容 //引用父窗口发送信息给下一个窗口 window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); } Salin selepas log masuk //过滤不是发给本窗口的信息 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); } } Salin selepas log masuk 三、iframe iframe载入页面和src里面的目标域是同一个域，是能够发起ajax请求（父子窗口）。 //前提是同源，不同源就不可以发起ajax请求。 不同窗口同源之间是可以获取window对象，但是不能获取window对象的属性和方法。 //不同源会报错 1、document.domain + iframe（同源可用 -- 跨子域） document.domain属性：一级域名相同，二级域名不同可以实现window对象获取。 页面一："https://segmentfault.com/page1.html" window.onload = function() { document.domain = "https://segmentfault.com/"; //设置domain window.getData = function() { //ajax请求 } } Salin selepas log masuk 页面二："https://segmentfault.com/page2.html" //动态创建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() {}) } Salin selepas log masuk 缺陷：主域名得一致。 2、window.name + iframe（非同源可用） window.name属性：在一个窗口的生命周期内，无论是否同源，同一个窗口的载入页面window.name属性是共享的，每个页面都可以操作。 页面一："https://segmentfault.com/page1.html" window.name = "this is data!" Salin selepas log masuk 页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //获取window.name function test() { var winName = document.getElementById("iframe").contentWindow.name; winName.src = "https://segmentfault.com/data.html"; //最后需要将iframe的src设置成当前域的一个页面地址 } Salin selepas log masuk 缺陷：兼容性不好 3、location.hash + iframe（非同源可用） 片段标识符：片段标识符是指url#号后面的部分。只是改变片段标识符页面不刷新。 页面一："https://www.segmentfault.com/page1.html" 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); Salin selepas log masuk 页面二："https://www.example.com/page2.html#messgae" 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); } } Salin selepas log masuk 页面三："ttps:/www.segmentfault.com/page3html#somedata" //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1); Salin selepas log masuk 缺点：数据暴露在url，长度也有限制。 四、WebSocket WebSocket：浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 设置WebSocket请求头信息，服务器支持就可以进行。 Origin: http://example.com //根据域名是否在白名单内来判断是否可以通信Salin selepas log masuk 缺点：实现成本高。 五、CORS cors是跨域资源分享。现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。 缺点：服务器配置，占用主域带宽。 本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
