博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端跨域之jsonp跨域
阅读量:4960 次
发布时间:2019-06-12

本文共 1252 字,大约阅读时间需要 4 分钟。

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代码如下:
    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请求能完成所有功能。比如如果需要给其他域服务器传送参数可以在请求后挂参数(注意不要挂隐私数据),即

       

      [html]   
       
       
      1. <script src="http://www.google.com/getUsers.php?flag=do&time=1"></script>。  
      JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。可以看出来JSONP跨域一般用于获取其他域的数据。

       

       

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

转载于:https://www.cnblogs.com/maggie-pan/p/6392121.html

你可能感兴趣的文章
将github上托管的代码 在我的域名下运行
查看>>
【Manthan, Codefest 18 (rated, Div. 1 + Div. 2) C】Equalize
查看>>
【codeforces 767A】Snacktower
查看>>
【MemSQL Start[c]UP 3.0 - Round 1 C】 Pie Rules
查看>>
Ognl中“%”、“#”、“$”详解
查看>>
我对应用软件——美团的看法
查看>>
我最喜欢的 5 个 Gedit 插件
查看>>
OOoLatex:在 OpenOffice.org 中拔出 Latex 公式
查看>>
linu学习第二天:文件系统相关操作
查看>>
执行了的程序,才是你的程序.
查看>>
在AxureRP8中实现广告文字滚动效果
查看>>
jQuery获取CSS样式中的颜色值的问题
查看>>
struts2.x + Tiles2.x读取多个xml 配置文件
查看>>
Sqlite文件在ubunut的查看
查看>>
表单校验之datatype
查看>>
python第六篇文件处理类型
查看>>
kettle 数据库连接失败
查看>>
ListView失去焦点选中行不能高亮显示的问题解决
查看>>
# jsp及servlet学习笔记
查看>>
Kconfig详解
查看>>