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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
判断访客终端类型集锦
Jun 05 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
深入理解Node中的buffer模块
2017/06/03 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
jQuery实现本地存储
2020/12/22 jQuery
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
进修护士自我鉴定
2013/10/14 职场文书
公司户外活动总结
2014/07/04 职场文书
个人先进事迹材料
2014/12/29 职场文书
世界文化遗产导游词
2015/02/13 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL