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 this关键字使用分析
Oct 21 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
jQuery动态添加
Apr 07 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
React Native之prop-types进行属性确认详解
Dec 19 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 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设计模式 php实现策略模式(strategy)
2015/12/07 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python中的并发编程实例
2014/07/07 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Python打印不合法的文件名
2020/07/31 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
导游词之南京中山陵
2019/11/27 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python