• js跨域原理及解决方案


    方法一:jsonp函数

    在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,基于script标签实现跨域.
    script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签。

    var script = document.createElement('script');  
    script.src = "http://aa.xx.com/js/*.js";  
    document.body.appendChild(script);  


    这样通过动态创建script标签加载其它域的js文件,然后通过本页面调用加载后js文件的函数,这样做的缺陷是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现域与域的数据传输。
    jquery中对jsonp的支持也是基于此方案。
    例如:服务器返回的数据不能是单纯的如{“Name”:”hofmann”}字符串,我们是没有办法引用这个字符串的.所以,要求返回的值是var json={“Name”:”zhangsan”},或json({“Name”:”zhangsan”})

    服务端:

    protected void retJSON()
    {
        string callback = Request.QueryString["jsoncallback"];
        string result = callback + "({"name":"hofmann","date":"2019-05-08"})";
        Response.Clear();
        Response.Write(result);
        Response.End();
    }


    客户端代码:

    $.ajax({ 
        async: false, 
        url: "http://192.168.0.5/APi/Js", 
        type: "GET", 
        dataType: 'jsonp', 
        jsonp: 'jsoncallback', 
        data: null, 
        timeout: 5000, 
        contentType: "application/json;utf-8", 
        success: function (result) { 
            alert(result.date); 
        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
            alert(textStatus); 
        } 
    });


    js向服务器发出了这样一个请求:
    http://192.168.0.5/APi/Js?jsoncallback=jsonp20190508
    服务器返回对象:
    jsonp20190508({"name":"hofmann","date":"2019-05-08"})
    此时就实现了跨域范文数据的要求.


    方法二:iframe实现跨域
    基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于同一个顶级基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下:
    页面一

    <html>  
    <head>  
      <script>  
       document.domain = "xx.com";  
        function a(){  
          alert("test");  
       }  
      </script>  
    </head>  
    <body>  
       <iframe src="http://192.168.0.5/APi/Frame2" id="frame1">  
         
       </iframe>  
       <script>  
      document.getElementById('frame1').onload = function(){  
         var d = document.getElementById('frame1').contentWindow;  
         d.b();  
           
     };  
       </script>  
     </body>  
    </html>  
    View Code

    页面二

    <html>  
     <head>  
      <script>  
        document.domain = "xx.com";  
        function b(){  
            alert("test from b");  
         }  
      </script>  
     </head>  
     <body>  
     </body>  
    </html>  

    这时候父页面就可以调用子页面的b函数,实现js跨域访问

    方法三:后台代理方式
    这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域

    参考 IIS反向代理

  • 相关阅读:
    docker知识集锦
    kubernetes知识集锦
    redis知识集锦
    Java多线程知识集锦
    vscode离线安装插件
    jsoncpp的简易教程
    为什么要自动化测试?
    如何选择正确的自动化测试工具
    如何选择测试自动化工具?
    测试自动化的五大挑战
  • 原文地址:https://www.cnblogs.com/hofmann/p/10829373.html
Copyright © 2020-2023  润新知