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文字滚动停顿效果代码
Jun 28 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
js实现两点之间画线的方法
May 12 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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处理json格式数据经典案例总结
2016/05/19 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
再论Javascript的类继承
2011/03/05 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Python制作数据导入导出工具
2015/07/31 Python
python实现多线程的两种方式
2016/05/22 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
pytest中文文档之编写断言
2019/09/12 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
中科方德软件测试面试题
2016/04/21 面试题
报纸媒体创意广告词
2014/03/17 职场文书
团队精神的演讲稿
2014/05/14 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python