zoukankan      html  css  js  c++  java
  • jsonp跨域

    跨域问题

    什么情况下会发生跨域:
     
    当本机请求服务器上数据的时候:会发生跨域;
     
    当本地服务器请求其他服务器数据的时候回发生跨域;
     
    跨域怎么处理那?

    1.为什么有跨域

        同源策略:基于浏览器的安全考虑,浏览器各个厂商之间出现了一个约定,这个约定叫做同源策略。这个约定的主要内容就是,域和域之间数据不共通。
        
        所谓同源是指:协议、域名、端口相同

    2.跨域的用途

    当网站发展壮大到一定地步的时候,会建立很多的节点,各个节点的IP是不同的,所以跨域问题就会出现。
     
    当测试阶段数据和本机的IP不通用的时候,那么跨域问题也会发生。
     

    3.为什么要跨域。

     
        因为要获得其他域中的数据;

    4.前端的跨域方法

     JSONP:就是利用浏览器对html标签(如:a,img,link,script等)没有做跨域请求限制的情况,使用script加载跨域接口的url。
     JSONP是伟大程序员与安全策略的斗争中发明的;
     JSONP就是在URL中调用function;
     

     jsonp的封装:function jsonp(url,success,data){    data = data || {};

    var str = "";
        for(var i in data){
            str += `${i}=${data[i]}&`;
        }
       var d = new Date();
      d.setDate(d.getDate()+3);
    var script = document.createElement("script"); script.src = url + "?" + str +"__wzqT=" + d; document.body.appendChild(script); window[data[data.columnName]] = function(res){ success(res); } }
    这里用百度的接口做的demo,在服务器下运行:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset = "utf-8">
            <title></title>
            <style>
                          *{
                    margin:0;
                    padding: 0;
                }
        
        
                #search{
                     600px;
                    margin:0 auto;    
                    margin-top: 100px;
                    position: relative;
                }
                #search input{
        
                     480px;
                    height: 100%;
                    border: 1px solid #b6b6b6;
                    height: 20px;
                    padding: 9px 7px;
                    font: 16px arial;
                    border: 1px solid #b8b8b8;
                    border-bottom: 1px solid #ccc;
                    border-right: 0;
                    vertical-align: top;
                    outline: none;
                    box-shadow: none;
                    -webkit-appearance: textfield;
                    background-color: white;
                    -webkit-rtl-ordering: logical;
                    user-select: text;
        
                }
        
                #search button{
                    cursor: pointer;
                    box-sizing: border-box;
                     97px;
                       height: 40px;
                    line-height: 38px;
                    padding: 0;
                    border: 0;
                    background: none;
                    background-color: #38f;
                    font-size: 16px;
                    color: white;
                    box-shadow: none;
                    font-weight: normal;
                     margin-left: -20px;
                }
                
                .result{
                    position: absolute;
                    
                    padding: 9px 7px;
                    background: #ddd;
        
                }
        
                .search-res{
                    position: absolute;
                    top: 100%;
                    left: 0;
                     480px;
                    border: 1px solid #b6b6b6;
                    border-top: none;
                }
        
                .search-res li{
                    list-style-type: none;
                    line-height: 20px;
                    padding: 2px 5px;
                    border-bottom: 1px solid #b6b6b6;
                }
            </style>
        </head>
        <body>
            <div id="search">
                <input type="text">
                <ul class="search-res">
                    
                </ul>
            </div>
        </body>
        <script src="jsonp.js">    //这里的jsonp.js就是封装的jsonp
            
        </script>
        <script>
           class Search{
            constructor(){
                // 1获取元素,url
                this.txt = document.querySelector("#search input");
                this.ul = document.querySelector(".search-res");
                this.url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
                this.events();
            }
    
            events(){
                // 2绑定事件
                var that = this;
                this.txt.addEventListener("input",function(){
                    that.value = this.value;
                    that.load();
                })
            }
    
            load(){
                // 3引入jsonp
                var that = this;
                jsonp(this.url,function(res){
                    that.res = res.s;
                    that.display();
                },{
                    columnName:"cb",
                    cb:"baidu",
                    wd:this.value,
                })
            }
    
            display(){
                // 4显示出来
                var str = "";
                for(var i = 0;i < this.res.length;i++){
                    str += `<li>${this.res[i]}</li>`;
                }
                this.ul.innerHTML = str;
            }
    
           }
           
           new Search();
        </script>
    </html>

     使用接口时,主要在于接口文档。

    接口列表
     
     
     
     
     
     
  • 相关阅读:
    Mac上的USB存储设备使用痕迹在新版操作系统有所变化
    Beware of the encrypted VM
    A barrier for Mobile Forensics
    Second Space could let suspect play two different roles easily
    Take advantage of Checkra1n to Jailbreak iDevice for App analysis
    Find out "Who" and "Where"
    Where is the clone one and how to extract it?
    Downgrade extraction on phones running Android 7/8/9
    高版本安卓手机的取证未来
    How to extract WeChat chat messages from a smartphone running Android 7.x or above
  • 原文地址:https://www.cnblogs.com/wuziqiang/p/12077513.html
Copyright © 2011-2022 走看看