跨域（1） jsonp 跨域

jsonp 的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jsonp  跨域</title>
</head>
<body>
    <script>
        function  succ(data) {
            console.log(data)
//Object
// p: false
// q: "s"
// s: Array(10)
// 0: "双色球开奖结果"
// 1: "sk-ll"
// 2: "双色球"
// 3: "圣墟"
// 4: "switch"
// 5: "顺丰快递单号查询"
// 6: "神级龙卫"
// 7: "沈浪与苏若雪最新章节更新"
// 8: "申通快递单号查询"
// 9: "soul"
// length: 10
// __proto__: Array(0)
// __proto__: Object
        }
    </script>
    <script  src="http://suggestion.baidu.com/su?wd=S&p=3&cb=succ&from=superpage">
    
    </script>
</body>
</html>

jsonp 的原理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function jsonp({url,params,cb}) {
            //返回一个promise 的目的是 为了  下面的 then 函数返回数据
            return new Promise((resolve,reject)=>{
                //创建script 
                let  script = document.createElement('script');
                // 声明方法
                 window[cb]= function  (data) {
                     resolve(data);
                     //得到数据移除script 标签
                     document.body.remove(script)
                 }
                 //合并参数
                 params = {...params,cb};
                 let  arrs = [];
                 //遍历数组 将 wd=S ，cb=succ 以这种形式添加到数组中
                 for(let  key  in params ) {
                     arrs.push(`${key}=${params[key]}`)
                 }
                 //链接script 
                 script.src = `${url}?${arrs.join('&')}`;
                 //添加到body  中
                 document.body.appendChild(script)
            })
        }
        jsonp({
            url:'http://suggestion.baidu.com/su?wd=S&cb=succ',
            params:{
                wd:'b'
            },
            cb:'succ'
        }).then(data=>{
             console.log(data);
            //    {q: "s", p: false, s: Array(10)}
            //     p: false
            //     q: "s"
            //     s: (10) ["双色球开奖结果", "sk-ll", "双色球", "圣墟", "switch", "顺丰快递单号查询", "神级龙卫", "沈浪与苏若雪最新章节更新", "申通快递单号查询", "soul"]
            //     __proto__: Object
        })
    </script>
</body>
</html>

输出：

jsonp 只能处理get 请求

跨域 （1） jsonp 跨域

猜你喜欢

跨域（1） jsonp 跨域