前端跨域问题
来源:互联网 发布:游戏王gx结局知乎 编辑:程序博客网 时间:2024/06/17 17:36
在做前端开发时,与后台的交互主要是通过ajax来获取后台数据进行前端展示,或者把前端获取的输入提交给后台。使用ajax时,一个经常遇到的问题就是跨域。跨域源于浏览器的同源策略,即本域的js 不能操作其他域的页面,或者说本域的页面不能执行其他域的js,这是浏览器对javascript施加对安全限制。因此,js只能访问同域名下的文档,当ajax要请求的数据存在于其它域名时,就会出现数据请求不到的跨域问题。常用的解决跨域问题方法总结。
1.jsonp
jsonp只能使用get方式,不能使用post方式。
jsonp是常见的解决跨域问题的方法。jsonp的原理也比较容易理解。我们可以发现做web页面上调用js文件时是不受跨域影响的,script标签引用的外部js文件都会得到无条件执行,类似的还有带src属性的img标签和iframe标签,它们都可以引用跨域的资源。script标签引用的js可以得到执行,因此jsonp的本质就是把我们需要的数据包裹在js语句中(即json with padding),通过script标签引用进来,而包裹数据的一般就是我们对数据进行处理的函数名称。举个简单的例子,我们想跨域获取一个数据对其进行展示
<script type="text/javascript"> var showData = function(data){ alert("remote data is:"+data); }</script><script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
因为跨域,无法在js中通过ajax获取data后展示。但是可以把data包裹在js语句中,远程文件内容如下:
showData("abc");
通过script标签引用跨域文件后,页面弹出提示窗口。
服务器的数据对外提供很多服务,更具灵活性的,可以在请求的URL中附上调用的函数名称,服务端则动态生成带不同函数名称的文件,可以适应不同的应用需求。
jquery对jsonp的实现。
jquery封装了jsonp的跨域方法,我们可以在ajax中进行参数设置,实现jsonp请求。
$.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } });
这时我们并不需要去具体地写这个回调函数,query在处理jsonp类型的ajax时,会自动生成回调函数并把数据取出来供success属性方法来调用。
或者更简洁的$.getjson方法
$.getJSON(url + "&callbak=?", function(data){ alert("Symbol:" + data.symbol + ", Price:" + data.price);});
2.Access Control
请求的响应必须包含一个Access- Control-Allow-Origin的HTTP响应头,该响应头声明了请求域的可访问权限。
header("Access-Control-Allow-Origin:*");//允许所有请求源header("Access-Control-Allow-Methods:GET,POST");//允许get和post请求方式
3.使用HTML5的postMessage方法(两个iframe之间或者两个页面之间)
html5引入的message的API可以更方便、有效、安全的解决多窗口之间、页面与嵌套的iframe消息传递、跨域等难题。
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。
2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为”*”,这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为”/”。
那么如何接收消息呢,监听window的message事件就可以。
两个例子:例1 例2
- 前端跨域问题
- 前端跨域问题
- 前端跨域问题
- 前端跨域问题
- 前端跨域问题
- 前端跨域问题
- 前端跨域问题
- 前端跨域问题
- 前端跨域问题
- 前端开发跨域问题,
- 前端请求跨域问题
- web前端 跨域问题
- 前端跨域问题总结
- 前端跨域的问题
- 前端跨域的问题
- 前端跨域的问题
- 前端解决跨域问题
- web前端技术总结-跨域问题
- Mac上安装MyEclipse2015 Mac破解版下载
- 朝鲜战争中的牺牲者
- rabbitMq使用笔记一:Window下安装使用RabbitMQ
- zstu4274-约素
- 广东工业大学第12届ACM程序设计大赛 Problem C: 爬楼梯
- 前端跨域问题
- 【C#项目实战】将EXCEl表格导入DataSet
- 16_struts2_1请求参数获取和校验
- 关于 dataTable 组件使用
- 数据结构:二叉树,二叉树的前中后序、层序遍历(递归法,非递归法),得到一个数叶子节点的个数……
- Python的numpy库中将矩阵转换为列表等函数
- ASP连接各种数据库的方法(大全)
- 欢迎使用CSDN-markdown编辑器
- 没有数据库也能做大数据