Jsonp 跨域总结-优快云博客

本文链接：https://blog.youkuaiyun.com/Manarola/article/details/50474899

本文深入探讨了同源策略下跨域请求的限制，以及如何利用JSONP技术突破这一限制，实现跨域数据获取。重点介绍了JSONP的工作原理、使用方法，以及其在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同源策略：网景公司提出的一个重要的安全策略。意思是只要是跨域请求，都是不允许的。

同源是指：协议，端口号，域名都相同。如果有一个不相同，都算是跨域。

但是后来我们发现，凡是带有src属性的标签<script>/<img>/<iframe>都拥有跨域的能力。

当前阶段，如果想通过纯web端实现跨域请求，只有一种方法：在远程服务器上将数据放入js文件来进行调用。

JSONP:一种非正式的传输协议。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jsonp只支持get请求方式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
    </script>

    //从服务器端会返回一个json格式的数据

 /*flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});*/