jsonp跨域请求

Posted £AP︶ㄣOL◢◤LO

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsonp跨域请求相关的知识,希望对你有一定的参考价值。

同源策略:是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以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.可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

 











以上是关于jsonp跨域请求的主要内容,如果未能解决你的问题,请参考以下文章

jsonp实现数据跨域请求

jsonp实现跨域请求

jsonp跨域请求php接口

跨域请求之jsonp的实现方式

JSONP跨域 ajax请求

前端跨域之Jsonp实现原理及.Net下Jsonp的实现