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 继承实例分析
Nov 04 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
微信小程序基于movable-view实现滑动删除效果
Jan 08 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下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
layui复选框限制选择个数的方法
2019/09/18 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python购物车程序简单代码
2018/04/18 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Django 请求Request的具体使用方法
2019/11/11 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
opencv实现图像平移效果
2021/03/24 Python
办理收楼委托书范本
2014/10/09 职场文书
2014年保管员工作总结
2014/11/18 职场文书
出国留学导师推荐信
2015/03/26 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis