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中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
Angular工具方法学习
Dec 26 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
Vue脚手架编写试卷页面功能
Mar 17 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
DSP接收机前端设想
2021/03/02 无线电
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php实现留言板功能
2017/03/05 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
python版本的读写锁操作方法
2016/04/25 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
python isinstance函数用法详解
2020/02/13 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
2014自荐信的写作技巧
2014/01/28 职场文书
军训感想500字
2014/02/20 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
批评与自我批评总结
2014/10/17 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
Python+Tkinter打造签名设计工具
2022/04/01 Python
python中mongodb包操作数据库
2022/04/19 Python