前端跨域之jsonp跨域

jsonp跨域原理

　　原理：因为通过script标签引入的js是不受同源策略的限制的（比如baidu.com的页面加载了google.com的js）。所以我们可以通过script标签引入一个js或者一个其他后缀形式（如PHP,JSP等）的文件，此文件返回一个js函数的调用，如返回JSONP_getUsers(["paco","john","lili"])，也就是说此文件返回的结果调用了JSONP_getUsers函数，并且把["paco","john","lili"]传进去，这个["paco","john","lili"]是一个用户列表。那么如果此时我们的页面中有一个JSONP_getUsers函数，那么JSONP_getUsers就被调用到，并且传入了用户列表。此时就实现了在本域获取了其他域数据的功能，也就是跨域。

1. //本域为baidu.com
2. <script>
3. function JSONP_getUsers(users){
4. console.dir(users);
5. }
6. </script>
7. //加载google.com的getUsers.php
8. <script src="http://www.google.com/getUsers.php"></script>
9. 需要google.com提供支持，getUsers.php代码如下：
10. 1. <?php>
    2. echo 'JSONP_getUsers(["paco","john","lili"])';//返回一个js函数的调用
    3. ?>

    4. 为什么script标签引入的文件不受同源策略的限制？因为script标签引入的文件内容是不能够被客户端的js获取到的，不会影响到被引用文件的安全，所以没必要使script标签引入的文件遵循浏览器的同源策略。而通过ajax加载的文件内容是能够被客户端js获取到的，所以ajax必须遵循同源策略，否则被引入文件的内容会泄漏或者存在其他风险。

       JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求（虽然采用post+动态生成iframe是可以达到post跨域的目的，但这样做是一个比较极端的方式，不建议采用）。一般get请求能完成所有功能。比如如果需要给其他域服务器传送参数可以在请求后挂参数（注意不要挂隐私数据），即

       1. <script src="http://www.google.com/getUsers.php?flag=do&time=1"></script>。

       JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。可以看出来JSONP跨域一般用于获取其他域的数据。

       一般能够用JSONP实现跨域就用JSONP实现，这也是前端用的最多的跨域方法。