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在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
js实现登录与注册界面
Nov 01 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
vue vant中picker组件的使用
Nov 03 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php统计文章排行示例
2014/03/04 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
JS编程小常识很有用
2012/11/26 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
python中OrderedDict的使用方法详解
2017/05/05 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python使用代理ip访问网站的实例
2018/05/07 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang