当前位置:Gxlcms > JavaScript > JavaScript跨域的解决方式总结(代码)

JavaScript跨域的解决方式总结(代码)

时间:2021-07-01 10:21:17 帮助过:8人阅读

本篇文章给大家带来的内容是关于跨域的解决方式总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

同源政策:协议、域名、端口均相同。

非同源限制:

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接口,就可以跨源通信。

缺点:服务器配置,占用主域带宽。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!

以上就是JavaScript跨域的解决方式总结(代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行