jsonp跨域请求

Posted 2020-10-22 ￡AP︶ㄣOL◢◤LO

同源策略：是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
同源：指的是地址里面的协议(http/https)、域名和端口号均相同

不受同源策略限制的：
　　1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
　　2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等

jsonp跨域就是利用src访问资源不受跨域限制，所以可以通过src这个特性来实现跨域访问数据

JSONP的原理：

　　（举例：a.com/jsonp.html想得到b.com/jsonp.php中的数据）
在a.com的jsonp.html里创建一个回调函数xxx，动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，通过callback参数指定回调函数的名字。
请求地址为http://b.com/main.js?callback=xxx。在jsonp.php中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调。

　　如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
　　假设客户期望返回JSON数据：["customername1","customername2"]
　　真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])

　　

<?php
header(‘Content-type: application/json‘);
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST [‘jsoncallback‘]);
//json数据
$json_data = ‘["customername1","customername2"]‘;
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

//客户端页面
//<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
    {
        var html = ‘<ul>‘;
        for(var i = 0; i < result.length; i++)
        {
            html += ‘<li>‘ + result[i] + ‘</li>‘;
        }
        html += ‘</ul>‘;
        document.getElementById(‘divCustomers‘).innerHTML = html;
    }
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

采用jsonp跨域也存在问题：
　　1.使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议基础token的身份验证
　　2.只能是GET，不能POST。
　　3.可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。