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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
typescript配置alias的详细步骤
Aug 12 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
PHP5 安装方法
2006/10/09 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python实现代码块儿折叠
2020/04/15 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
心理健康心得体会
2014/01/02 职场文书
企业后勤岗位职责
2014/02/28 职场文书
分层教学实施方案
2014/03/19 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
民政局未婚证明
2015/06/15 职场文书
村主任当选感言
2015/08/01 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android