JSONP跨域

1、搭建nodejs服务器，端口号为8888
2、在服务器中拦截index

//拦截index
router.get("/index",function(req,resp){
    let data=JSON.stringify({
                status_code:200,//状态码
                result:{//返回的数据
                   name:"张丹",
                    age:11
                }
    })
    //发送数据
    resp.send(`${req.query.callback}(${data})`)
})

3、新建一个html文件，代码如下：

<script>
    function getData(data){     
        //得到另一个服务器的数据
        console.log(data) 
    }
</script>
<script src="http://localhost:8888/index?callback=getData"></script>

当前静态资源域名为http://localhost:63342/webstromProject/4%E9%98%B6%E6%AE%B5/kuayu.html?_ijt=fdroarup1qbmdlk6nil43teij4

通过script标签src属性进行跨域访问http://localhost:8888/index

原生JavaScript封装jsonp

<script>
    jsonp({
        url:'http://localhost:8888/index',
        data:'',
        success:(data)=>{
            console.log(data)
        }
    })
    function jsonp(options) {
        // 1.产生一个不重复函数名
        let callbackName='itlike_'+Math.random().toString().substr(2)  
       	//运行函数
        window[callbackName]=function(data){
            options.success(data)
            document.body.removeChild(script)
        }
        // 2.处理url的拼接
        options.url=options.url+'?callback='+callbackName;
        // 3.创建script标签
        let script=document.createElement('script')
        script.src=options.url;
        document.body.appendChild(script)
    }
</script>

jQuery中的jsonp的使用

<script src="day03/jquery-1.11.3.js"></script>
<script>
    $.ajax({
        url: "http://localhost:8888/index",
        type: "get",
        dataType:"jsonp",
        jsonpCallback:"callback",
        data: {},
        success: function (data) {
            console.log(data);
        }
    })
</script>