跨域（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 跨域

最新文章

热门文章

跨域（1） jsonp 跨域