jsonp跨域请求的方式

Posted 2020-11-19 梦中琴歌

1、jsonp一种请求方式、用于解决一个棘手的问题：

由于浏览器具有同源策略：即可以通过后台去访问其他网站，而不能通过浏览器（ajax请求）访问其他网页或域（阻止ajax请求，但是无法阻止<script src="">请求，所有带src属性的都不阻止

巧妙的实现方式：

创建一个<script>标签，设置它的src属性为需要访问的地址，返回的数据必须是json格式的、只能发get请求

实现原理:

在src里面带一个callback=fun参数，参数的值是需要服务端构造的函数来返回。服务端会返回return Httprequest（fun（数据））然后需要在本地script脚本里面加一个fun函数，函数内容可以是function fun（arg）{
console.log（arg）
}
这里的arg就是服务端返回的数据，完成后再删掉这个script标签

实现源码：

script>
        function getContent(){
            /*
            var xhr = new XMLHttpRequest();
            xhr.open(\'GET\',\'http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2\');
            xhr.onreadystatechange = function(){
                console.log(xhr.responseText);
            };
            xhr.send();
            */
            /*
            var tag = document.createElement(\'script\');
            tag.src = \'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403\';
            document.head.appendChild(tag);
            document.head.removeChild(tag);
            */
            $.ajax({
                url: \'http://www.jxntv.cn/data/jmd-jxtv2.html\',
                type: \'POST\',
                dataType: \'jsonp\',
                jsonp: \'callback\',
                jsonpCallback: \'list\'
            })
        }

        function list(arg){
            console.log(arg);
        }

　　更多：https://www.cnblogs.com/wupeiqi/p/5703697.html