Javascript跨域请求的4种解决方式


Posted in Javascript onMarch 17, 2013

什么情况下才会出现跨域
假设域名是:http://www.example.com.cn/
如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到的。
解决方式
一、window.name
1、 服务器返回

<script>window.name='{"id":"3", "name":"leisure"}';</script> 
2、定义一个iframe,添加onload事件 <iframe id="iframe1" onload="iLoad"><iframe> 
<script type="text/javascript"> 
var load = false; 
function iLoad() { 
if(load == false) { 
// 同域处理,请求后会再次重新加载iframe 
document.getElementById('iframe1').contentWindow.location = '/'; 
load = true; 
} else { 
// 获取window.name的内容,注意必须进行同域处理后方可访问! 
var data = document.getElementById('iframe1').contentWindow.name; 
alert(data); // {"id":"3", "name":"leisure"} 
load = false; 
} 
} 
</script>

3、定义一个form,设置form的target为iframe的id,然后提交form
<form action="url" method="POST" target="iframe1"> 
<button type="submit" value="submit" /> 
</form>

二、JSONP
服务器返回 callback({"id": "3", "name": "leisure"});
<script type="text/javascript"> 
function callback(data) { 
alert(data); 
} 
</script> 
<script type="text/javascript" src="http://www.example.com.cn/product.jsp?id=5&jsonp=callback"></script>

三、jQuery.getJSON
服务器返回 json格式数据 test({"id": "3", "name": "leisure"}); test函数名为callback参数中定义
$.getJSON(url + "?callback=?", data, function(data) { 
}

注意callback=?这个参数必须带上,jquery会自动生成一个函数名替换这个问号!jQuery.getJSON实际上是用了JSONP方式实现。
四、flash跨域
服务器添加crossdomain.xml
http://www.example.com.cn/crossdomain.xml
<?xml version="1.0"?> 
<cross-domain-policy> 
<allow-access-from domain="*.another.com.cn" /> 
</cross-domain-policy>
Javascript 相关文章推荐
JS的replace方法详细介绍
Nov 09 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JS实现拼图游戏
Jan 29 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
两种方法实现文本框输入内容提示消失
Mar 17 #Javascript
js 自制滚动条的小例子
Mar 16 #Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 #Javascript
js加强的经典分页实例
Mar 15 #Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 #Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 #Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 #Javascript
You might like
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
js定时器实例分享
2016/12/20 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
产品促销活动策划书
2014/01/15 职场文书
美容院经理岗位职责
2014/04/03 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
闪闪的红星观后感
2015/06/08 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript