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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
node.js超时timeout详解
Nov 26 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
详解Bootstrap按钮
Jan 04 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
javascript实现多边形碰撞检测
Oct 24 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
记录Django开发心得
2014/07/16 Python
python with statement 进行文件操作指南
2014/08/22 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
python 实现性别识别
2020/11/21 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
服装机修工岗位职责
2013/12/26 职场文书
统计岗位职责
2014/02/21 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
医药营销个人求职信
2014/04/12 职场文书
初三学习计划书范文
2014/04/30 职场文书
树转促学习心得体会
2014/09/10 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
承兑汇票延期证明
2015/06/23 职场文书