zoukankan      html  css  js  c++  java
  • 跨域问题常用4种方法解决方案

    跨域问题

    1.JSONP:动态插入script标签,通过script标签引入一个js文件,这个文件载入成功之后会执行我们在url参数中制定的函数,并且会把我们需要的json数据传入

    代码实现

    Jquery方法

    $.getJSON("http://a.com/data.php?callback=?",function dosomething(jsondata){
        //处理获得的jsondata数据
    })

    jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。
    $.getJSON会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。
    getJSON: function( url, data, callback ) {
        return jQuery.get( url, data, callback, "json" );
    }

    2.window.name+iframe

    Iframesrc属性由外域转向本地域,跨域数据即由iframewindow.name从外域传递到本地域,巧妙的绕过了浏览器的跨域访问限制,name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

    代码实现:

    var data = '';
    var ifr = document.createElement('iframe');
    ifr.src = "http://localhost:8081/data.html";
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function() {
        ifr.onload = function() {
            data = ifr.contentWindow.name;
            console.log('收到数据:', data);
        };
        ifr.src = "http://localhost:8080/同目录没有用.html";
    }

    把data.html页面载入进来?

    显然我们不能直接在跨域1.html页面中通过改变window.location来载入data.html页面,
    因为我们想要即使跨域1.html页面不跳转也能得到data.html里的数据。
    答案就是在跨域1.html页面中使用一个隐藏的iframe来充当一个中间人角色,由iframe去获取data.html的数据,然后跨域1.html再去得到iframe获取到的数据。
    充当中间人的iframe想要获取到data.html的通过window.name设置的数据,只需要把这个iframe的src设为data.html就行了。然后跨域1.html想要得到iframe所获取到的数据,也就是想要得到iframe的window.name的值,还必须把这个iframe的src设成跟跨域1.html页面同一个域才行,不然根据前面讲的同源策略,跨域1.html是不能访问到iframe里的window.name属性的。这就是设置iframe的src='同目录没有用.html'的原因。

    3.H5中的postMessage跨文档信息传输Cross Document Messaging

    代码实现:

    A.Html

    <iframe src="http://localhost:8081/b.html"></iframe>

    window.onload = function() {
        var targetOrigin = 'http://localhost:8081';
        window.frames[0].postMessage('要发了', targetOrigin);

    //otherwindow.postMessage(message, targetOrigin)中,otherwindow是对接收信息页的window引用,可以是iframecontentwindow.

    Message是需要发送的信息stringtargetOrigin是用于限制otherwindow*表示不做限制
    }
    window.addEventListener('message', function(e) {
        console.log('a收到消息', e.data);
    });

    B.Html

     window.addEventListener('message', function(e) {

            if(e.source != window.parent) {

       return;

            }

            let data = e.data;

            console.log('b.html 接收到的消息:', data);

            parent.postMessage('我已经接收到消息了!', e.origin);

    });

    4.CORS 是一个 W3C 标准,全称是"跨域资源共享"Cross-origin resource sharing)它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 ajax 只能同源使用的限制。

    CORS 需要浏览器和服务器同时支持才可以生效,对于开发者来说,CORS 通信与同源的 ajax 通信没有差别,代码完全一样。浏览器一旦发现 ajax 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

    因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信。服务器设置相应头中的 Access-Control-Allow-Origin浏览器允许跨域请求,需要浏览器支持H5该值要与请求头中 Origin一致才能生效,否则将跨域失败。

  • 相关阅读:
    C++ 虚成员函数和动态联编
    C++ 多态公有继承
    C++ 继承特性
    C++ 公有派生
    C++ 基类与派生类
    C++ 类继承
    C++ 伪私有方法
    C++ new失败
    mysql用户授权
    linux时间设置
  • 原文地址:https://www.cnblogs.com/yuqing-o605/p/7657096.html
Copyright © 2011-2022 走看看