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的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
常用的javascript设计模式
Jan 11 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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使用Imagick生成图片的方法
2015/07/31 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
vue中监听返回键问题
2019/08/28 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
法人授权委托书
2014/04/03 职场文书
小学班级特色活动方案
2014/08/31 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
2015年教师新年寄语
2014/12/08 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
安全生产先进个人总结
2015/02/15 职场文书
不同意离婚上诉状
2015/05/23 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
孔子观后感
2015/06/08 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis