Node.js学习-17跨域解决方法2----JSONP

一、JSONP是什么？

JSONP JSON with padding
必须后端工程师配合 写出jsonp数据 前端才能用script标签请求得到数据
html核心代码：

<button onclick="looka()">点我可以打印a变量</button>
    <script>
        function looka() {
            //利用 时间戳设计不会重复函数
            var name = "fn" + new Date().getTime()
            window[name] = function (arg) {
                console.log(arg);
            }
            var script1 = document.createElement("script")
            script1.src = `http://192.168.56.1:8080/ajax2?name=jack&age=20&callback=${name}`
            console.log(111111);
            document.body.append(script1)
        }
    </script>

index.js核心代码

router.get("/ajax2", (req, res) => { 
        console.log(88888, "有人访问了我");
    var obj={name:"karen",age:20,books:["css","js"]}
    var str=JSON.stringify(obj)
    let query1=url.parse(req.url).query
    let queryobj=querystring.parse(query1)//'key1=value1&key2=value2&callback=fn1'
    console.log(22222,query1,1111,queryobj);//name=jack&age=20&callback=fn   { name: 'jack', age: '20', callback: 'fn' }   
    
    res.end(`${queryobj.callback}(${str})`)
})

二、 讲一讲你对JSONP的理解?

1.前端网页中用ajax请求跨域服务器的网址 会报跨域错误
用script标签的src属性去请求跨域服务器的网址 不会报跨域错误,但是 会直接把请求过来的编码用v8引擎去运行

2. 我们可以在后端写一个js引擎能识别的字符串发送给前端,这个字符串是这样的:
' fn({"name":"karen"}) '
前端可以用script标签的src属性去请求这个网址,请求完毕以后 v8就会直接运行这个编码 去调用fn函数,所以我们必须提前创建这个函数

3.函数的名称问题:  前端可以通过querystring把函数名以参数的形式发送给后端
后端解析了以后 直接拼接到数据中(比如那个fn)