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 相关文章推荐
常用的javascript function代码
May 23 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
两种方法实现文本框输入内容提示消失
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
php目录遍历函数opendir用法实例
2014/11/20 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python 自动重连wifi windows的方法
2018/12/18 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
主题酒店策划书
2014/01/28 职场文书
《荷花》教学反思
2014/04/16 职场文书
英语专业求职信
2014/07/08 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
委托公证书样本
2015/01/23 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL