用iframe设置代理解决ajax跨域请求问题
面对ajax跨域请求的问题，想用代理的方式来解决这个跨域问题。在服务器端创建一个静态的代理页面，在客户端用iframe调用这个代理
今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。
什么是跨域？
简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。
方案：在服务器端创建一个静态的代理页面，在客户端用iframe调用这个代理，然后通过iframe的document.getElementById("proxy").contentWindow对象来请求ajax。
服务器端的代理页面：
<!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>
客户端ajax的调用代码示例：
<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不一样。
用iframe设置代理解决ajax跨域请求问题的更多相关文章
- 如何解决ajax跨域请求？
1.什么是跨域? a.域名不同 b.域名相同,端口不同 注:只有域名相同,端口相同时,才可以访问数据 可以使用jsonp解决ajax跨域请求的问题. 2.什么是jsonp? Jsonp其实就是一个跨域 ...
- 解决ajax跨域请求 （总结）
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 【前端_js】解决ajax跨域请求数据
1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...
- 本地主机作服务器解决AJAX跨域请求访问数据的方法
近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...
- webapi 解决ajax跨域请求问题
webapi在配置文件中加入这几句就可以解决ajax(同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是 ...
- 解决ajax跨域请求问题
自己做网站的时候,经常遇到跨域问题,下面是平时多次实践总结出的解决方法,大家有什么更好的思路,可以相互交流下~ XMLHttpRequest cannot load http://www.imooc. ...
- 谷歌浏览器如何设置可以解决Ajax跨域问题？
Ajax本身是不支持跨域的,跨域问题其实很简单,通过浏览器的相应设置可以完成两个不同的服务器或两个不同服务下的项目互相访问.希望大家给予评价及投票. 方法/步骤 首先谷歌快捷方式上右击,在下拉列表 ...
- ajax --- 解决ajax跨域请求导致session失效的问题
起因:http是无状态的,因此我们通常需要用到cookie以及session来保存状态,session是在服务器端存储的,会和cookie一起使用,设置了session之后,会发送给浏览器一个cook ...
随机推荐
- lookupedit清空选择 z
lookupedit绑定数据,选择以后.怎么点击按钮使lookupedit回到初始位置,即nulltext的值.注意,是点击按钮,不是按默认的CTRL+DELETE. txtKHXX.EditValu ...
- FreeMarker笔记 第三章 模板
,先来一打小白兔: 3.1 总体结构 用程序语言编写的程序就是模板,模板也被成为FTL(代表FreeMarker模板语言). 模板是由如下部分混合而成的: Text文本:文本会照着原样来输出: Int ...
- TopFreeTheme精选免费模板【20130701.特别版】
今天我们整理了16款WordPress和Joomla的最新主题.它们都是来自Themeforest,RocketTheme,YooTheme以及TemPlaza的高质量主题,赶快收藏起来吧. Este ...
- java&c# dec 加密，通用
java /** * 解密DES * @param key 密钥,长度必须是8的倍数 * @param data 数据源 * @return 解密内容 */ public final static S ...
- 《LINUX程序设计 第四版》 阅读笔记：(一)
1. 头文件 使用-I标志来包含头文件. gcc -I/usr/openwin/include fred.c 2. 库文件 通过给出 完整的库文件路径名 或 用-l标志 来告诉编译器要搜索的库文件. ...
- 一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序的库 RxJava，相当好
https://github.com/ReactiveX/RxJava https://github.com/ReactiveX/RxAndroid RX (Reactive Extensions,响 ...
- 转】MyEclipse使用总结——使用MyEclipse打包带源码的jar包
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4136303.html 感谢! 平时开发中,我们喜欢将一些类打包成jar包,然后在别的项目中继续使用,不过由于看不 ...
- Hadoop概念学习系列之分布式数据集的容错性（二十七）
一般来说,分布式数据集的容错性有两种方式: 1.数据检查点 2.记录数据的更新 我们面向的是大规模数据分析,数据检查点操作成本很高:需要通过数据中心的网络连接在机器之间复制庞大的数据集,而网络带宽往往 ...
- 【转】log4j详解及简易搭建
原文链接:http://www.cnblogs.com/mailingfeng/archive/2011/07/28/2119937.html log4j是一个非常强大的log记录软件. 首先当然是得 ...
- [翻译]创建ASP.NET WebApi RESTful 服务（7）
实现资源分页 本章我们将介绍几种不同的结果集分页方式,实现手工分页,然后将Response通过两个不同的方式进行格式化(通过Response的Envelop元数据或header). 大家都知道一次查询 ...