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
随机推荐
- maven依赖出现问题：failed to collect dependencies
问题:在maven项目中,install dao层之后,在interface调用显示failed to collect dependencies: 解决办法: 1.检查依赖信息是否正确,不确定删除后重 ...
- otter 数据同步
阿里巴巴分布式数据库同步系统(解决中美异地机房) 基本介绍: https://github.com/alibaba/otter 快速使用: https://github.com/alibaba/ott ...
- web安全/渗透测试--1--web安全原则
web 安全: https://blog.csdn.net/wutianxu123/article/category/8037453/2 web安全原则 安全应该是系统开发之初就考虑的问题.换句话说 ...
- day41-解决粘包问题
一.socket缓冲区 研究粘包之前先看看socket缓冲区的问题: 二.socket缓存区的详细解释 每个socket被创建后,都会分配两个缓冲区,输入缓冲区和输出缓冲区. write()/send ...
- Cmake 编译opengl开源库glfw工程及使用
使用的是cmake gui进行编译的,路径输入好之后,点configure配置vs版本,这里是vs2013版本,然后如果画面出现红色的 需要再点击一下 Generate 然后直接点open proje ...
- UI5-学习篇-5-SAP创建OData服务-Structure
本文介绍SAP后端系统基于数据结构创建OData服务过程. 1.创建数据字典 2.创建OData service 2.1创建Gateway service project 事务码:SEGW 点击Cre ...
- leetcode题解 candy
要求的条件是: 1.每个人最少一个糖果. 2.相邻的小朋友,要保证,评分高的比评分低的糖果多. 如果从一侧扫描的话,容易确定的就是递增序列,只要上升1个就够了. 容易出现问题的就是:遇到下降期,或者相 ...
- Xe7 System.Json解析数据格式
一.Demo一 解析嵌套数组 Json数据 {"code":1,"msg":"","data":{"Grade ...
- Go的50度灰：Golang新开发者要注意的陷阱和常见错误（转）
目录 [−] 初级 开大括号不能放在单独的一行 未使用的变量 未使用的Imports 简式的变量声明仅可以在函数内部使用 使用简式声明重复声明变量 偶然的变量隐藏Accidental Variable ...
- linux下安装Tomcat7.0
1.下载安装文件:Download apache-tomcat-7.0.14.tar.gz 下载1 下载 2.输入命令解压文件:tar - zxvf apach ...