面对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跨域请求问题的更多相关文章

  1. 如何解决ajax跨域请求？

    1.什么是跨域? a.域名不同 b.域名相同,端口不同 注:只有域名相同,端口相同时,才可以访问数据 可以使用jsonp解决ajax跨域请求的问题. 2.什么是jsonp? Jsonp其实就是一个跨域 ...

  2. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  3. 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  4. 【前端_js】解决ajax跨域请求数据

    1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...

  5. 本地主机作服务器解决AJAX跨域请求访问数据的方法

    近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...

  6. webapi 解决ajax跨域请求问题

    webapi在配置文件中加入这几句就可以解决ajax(同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是 ...

  7. 解决ajax跨域请求问题

    自己做网站的时候,经常遇到跨域问题,下面是平时多次实践总结出的解决方法,大家有什么更好的思路,可以相互交流下~ XMLHttpRequest cannot load http://www.imooc. ...

  8. 谷歌浏览器如何设置可以解决Ajax跨域问题？

    Ajax本身是不支持跨域的,跨域问题其实很简单,通过浏览器的相应设置可以完成两个不同的服务器或两个不同服务下的项目互相访问.希望大家给予评价及投票. 方法/步骤   首先谷歌快捷方式上右击,在下拉列表 ...

  9. ajax --- 解决ajax跨域请求导致session失效的问题

    起因:http是无状态的,因此我们通常需要用到cookie以及session来保存状态,session是在服务器端存储的,会和cookie一起使用,设置了session之后,会发送给浏览器一个cook ...

随机推荐

  1. mybatis注解详解

    首 先当然得下载mybatis-3.0.5.jar和mybatis-spring-1.0.1.jar两个JAR包,并放在WEB-INF的lib目录下 (如果你使用maven,则jar会根据你的pom配 ...

  2. 使用SchemaSpy逆向工程生成数据库依赖关系使用SchemaSpy工具可以快速的从数据库中得到

    使用SchemaSpy逆向工程生成数据库依赖关系    使用SchemaSpy工具可以快速的从数据库中得到表的依赖关系,同时生成一个生动的“表图”结合的报告.方便快速了解数据库中的数据库对象间关系,类 ...

  3. PHP 转义详解

    php中数据的魔法引用函数 magic_quotes_gpc  或 magic_quotes_runtime 设置为on时,为我们引用的数据碰到 单引号' 和 双引号" 以及 反斜线\ 时自 ...

  4. Chapter14：重载运算符

    对于一个运算符函数来说,它或者是类的成员,或者至少含有一个类类型的参数. int operator+(int, int);//错误,不能为int重定义内置运算符 对于一个重载的运算符来说,其优先级和结 ...

  5. FILETIME, SYSTEMTIME 与 time_t 相互转换

    FILETIME, SYSTEMTIME 与 time_t 相互转换 2009-08-24 15:37:14|  分类: 默认分类|举报|字号 订阅     //******************* ...

  6. 性能测试-ApacheBench

    基本简介 ApacheBench 是一个指令列程式,专门用来执行网站服务器的运行效能,特别是针对Apache 网站服务器.这原本是用来检测 Apache 网站服务器能够提供的效能,特别是可以看出Apa ...

  7. 【Python学习笔记】字典操作

    字典dict是Python中唯一内置的映射类型,由键值对组成,字典是无序的.字典的键必须是不变对象,如字符串.数字.元组等,而包含可变对象的列表.字典和元组则不能作为键.这里可变和不可变的意思是指这个 ...

  8. HW7.14

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  9. 第三百二十三天 how can I 坚持

    人在最绝望的时候会干啥,<进击的巨人>. 可以绝望,但一定要相信还有希望. 今天去看了<美人鱼>,确实挺好吧. 把愤怒归结于无能,其实是大错特错,愤怒是人的情绪的发泄,是人就有 ...

  10. Hadoop应用开发实战案例 第2周

    比如,封面,是一网页,可以看出用户在此网页上,鼠标呈现F形状. 海量Web日志分析 用Hadoop提取KPI统计指标 更详细原文博客:http://blog.fens.me/hadoop-mapred ...