源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

用iframe设置代理解决ajax跨域请求问题

  • 时间:2021-10-18 10:45 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用iframe设置代理解决ajax跨域请求问题
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。 [b]什么是跨域?[/b] 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。 [b]方案:[/b]在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("proxy").contentWindow对象来请求ajax。 [b]服务器端的代理页面:[/b]
[u]复制代码[/u] 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax跨域</title> <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text/javascript"> document.domain = 'xxx.com'; </script> </head> <body> </body> </html>
[b]客户端ajax的调用代码示例:[/b]
[u]复制代码[/u] 代码如下:
<iframe src="http://weixin.goumin.com/proxy.html" id="proxy" style="display:none;" onload="loadDefaultData();"></iframe> <script type="text/javascript"> document.domain = "xxx.com"; function loadDefaultData(){ var iframe_jquery = document.getElementById("proxy").contentWindow.$; iframe_jquery.ajax({ type: "POST", url:""+Math.random(), data:{}, async:false, dataType:'json', success:function(data){ alert(data); } }); } </script>
url:""+Math.random(), 请注意加红的url这行,用一个随机函数来解决浏览器缓存的问题。让每一次请求的url不一样。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部