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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
浅析Vue中method与computed的区别
Mar 06 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 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 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
Python代码调试的几种方法总结
2015/04/15 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python生成密码库功能示例
2017/05/23 Python
彻底理解Python中的yield关键字
2019/04/01 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
python切割图片的示例
2020/11/12 Python
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
餐饮业员工工作决心书
2014/03/11 职场文书
植树节口号
2014/06/21 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
早上好问候语大全
2015/11/10 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers