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 相关文章推荐
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
bootstrap Table实现合并相同行
Jul 19 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
BootStrap中
2016/12/10 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Puppeteer使用示例详解
2019/06/20 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
巧克力蛋糕店创业计划书
2014/01/14 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
销售团队口号大全
2014/06/06 职场文书
认真学习保证书
2015/02/26 职场文书
爱国教育主题班会
2015/08/14 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python