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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
DOMXML函数笔记
2006/10/09 PHP
php 获取客户端的真实ip
2009/11/30 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
详解vue中axios的封装
2018/07/18 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
测试时代收集的软件测试面试题
2013/09/25 面试题
环境工程大学生自荐信
2013/10/21 职场文书
保证书格式范文
2014/04/28 职场文书
优秀教师演讲稿
2014/05/06 职场文书
质量安全标语
2014/06/07 职场文书
失职检讨书大全
2015/01/26 职场文书
小学母亲节活动总结
2015/02/10 职场文书
简单的辞职信模板
2015/05/12 职场文书
公司行政管理制度范本
2015/08/05 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书