iframe解决ajax主域和子域之间的跨域问题
在某些应用场景下，需要在主域中，调用子域中的某个接口，如果直接在主域中向子域发ajax请求，会报跨域错误，可以用iframe来解决这种跨域问题。
假如主域为www.baidu.com,子域为baike.baidu.com。主域中的A页面需要通过ajax请求调用子域中的某项服务。首先需要在子域中准备一个B页面，B页面就是一个简单的空页面，最好把jquery引到B页面中，这样可以直接用jquery发ajax请求；在主域的A页面中要用iframe把B页面url地址引过来。
B页面格式
//B.html
<html>
<head>
<title>B页面</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>B页面</div>
<script>
$(function(){
try{
document.domain = "www.baidu.com";
}catch(e){}
});
</script>
</body>
</html>
A页面格式
//A.html
<html>
<head>
<title>A页面</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>A页面</div>
<iframe id="iframe" src="http://baike.baidu.com/B.html" style="display:none;"></iframe>
<script>
$(function(){
try{
document.domain = "www.baidu.com";
}catch(e){}
$("#iframe").load(function(){
var iframe = $("#iframe").contentDocument.$;
ifram.get("http://baike.baidu.com/接口",function(data){});
});
});
</script>
<body>
</html>
有一点需要注意，就是在A页面中，要等iframe标签完成加载B页面之后，再取iframe对象的contentDocument,否则如果B页面没有被iframe完全加载，在A页面中通过contentDocument属性就取不到B页面中的jQuery对象。一旦取到B页面中的jQuery对象，就可以直接发ajax请求了，这种类似“代理”方式可以解决主子域的跨域问题。
iframe解决ajax主域和子域之间的跨域问题的更多相关文章
- javascript 跨域请求详细分析(终极跨域解决办法)
自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...
- 跨域问题解决方案(HttpClient安全跨域 & jsonp跨域)
1 错误场景 今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行 都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会 ...
- 跨域问题解决方式(HttpClient安全跨域 & jsonp跨域)
1 错误场景 今天要把项目部署到外网的时候,出现了这种问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 执行 都没有问题的, 一旦把我须要调用接口的项目B放到其它的server上, ...
- 跨域调用webapi web端跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...
- webapi 跨域访问设置基于jsonp跨域
JSONP实现跨域 Web API并没有提供JSONP Formatter,但是这并不能影响我们前进的脚步,我们可以自定义Formatter来实现JSONP功能.既然是利用JSONP跨域,那么就得简 ...
- SpringMvc支持跨域访问，Spring跨域访问，SpringMvc @CrossOrigin 跨域
SpringMvc支持跨域访问,Spring跨域访问,SpringMvc @CrossOrigin 跨域 >>>>>>>>>>>> ...
- SpringMvc支持跨域访问，Spring跨域访问，SpringMvc @CrossOrigin 跨域[转]
SpringMvc支持跨域访问,Spring跨域访问,SpringMvc @CrossOrigin 跨域 原文地址:https://www.cnblogs.com/fanshuyao/p/716847 ...
- 利用 iframe解决ajax的跨域问题
问题 1. form提交或a标签跳转方式提交不会引发跨域问题. 2. ajax出于安全问题就有了跨域问题,因为一次请求中既访问了外部域最后返回了自己的域. 3. 用iframe其实就是想仿照ajax的 ...
- AJAX中的跨域问题：什么是跨域？如何解决跨域问题？
域不一样的,即为跨域,包括(协议,域名,端口号) 1. 指定允许其他域名访问 header('Access-Control-Allow-Origin:*'); 2.使用jsonp
随机推荐
- JAVA 本地序列化。
HashMap map = new HashMap(); map.put("province", "北京"); map.put("coding&quo ...
- git push异常
git push异常:! [remote rejected] HEAD -> refs/for/master ([3149246] missing Change-Id in commit mes ...
- RDD编程接口
Spark中提供了通用接口来抽象每个RDD,这些接口包括: 1.分区信息 2.依赖关系 3.函数,基于父RDD计算方法 4.划分策略和数据位置的元数据
- Mac安装Mysql-python _mysql.c:44:10: fatal error: 'my_config.h' file not found
解决步骤 brew install mysql brew unlink mysql brew install mysql-connector-c sed -i -e /bin/mysql_config ...
- mac 命令行上传文件，mac tar.gz命令压缩
在mac上可以直接打开命令行给服务器上传文件,注意是本地的命令行,不是服务器的命令行,我就走了绕路 命令可以看这里https://www.cnblogs.com/hitwtx/archive/2011 ...
- java环境变量配置方法
原创文章,转载请注明出处. 这是本人2011-9-4记录的,现在把它放在博客上. windows xp下配置JDK环境变量: 1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为 ...
- java的第一次博客
一枚16年本科毕业的java程序员,至今工作两年,这是我的第一个博客. 谢谢!!!
- 机器学习进阶-人脸关键点检测 1.dlib.get_frontal_face_detector(构建人脸框位置检测器) 2.dlib.shape_predictor(绘制人脸关键点检测器) 3.cv2.convexHull(获得凸包位置信息)
1.dlib.get_frontal_face_detector() # 获得人脸框位置的检测器, detector(gray, 1) gray表示灰度图, 2.dlib.shape_predict ...
- day27-反射
1.介绍 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语 ...
- bash中 2>&1 & 的解释
1.首先,bash中0,1,2三个数字分别代表STDIN_FILENO.STDOUT_FILENO.STDERR_FILENO,即标准输入(一般是键盘),标准输出(一般是显示屏,准确的说是用户终端控制 ...