前端跨域问题
2017-01-14 18:48
211 查看
跨域
1、域名地址组成
域名组成图如下:域名组成.png当协议、主域名、端口号中任意一个不相同时,都算作不同域
不同域之间相互请求资源,就算作‘跨域’,如:http://www.abc.com/index.html 请求 http://www.efg.com/app.js
Javascript 出于安全方面的考虑,有着同源策略的限制,不允许跨域调用其他页面的的对象
如下图:跨域情况.png
2、处理跨域方法之一——代理
通过在同域名的web服务端创建一个代理北京服务站(域名:www.beijing.com) 广州服务器(域名:www.guangzhou.com)
北京服务器的后台 创建一个代理程序 proxy-guangzhouserver.php 来调用广州服务器,然后再把响应数据结果返回给前端,这样前端调用北京服务器的服务和调用广州服务器的效果一样
见 代理.png
3、处理跨域方法之二——jsonp
用于处理主流浏览器的跨域数据访问的问题jsonp只支持get请求,jsonp 是基于 标签的src属性,所以不可能支持 post;jquery的ajax的jsonp支持get,即使在type属性写post,实际请求仍为get请求。标签发起的请求只能是get请求
···前端js
$.ajax({
type:’GET’,
url:’http://127.0.0.1:8080/server.php‘,
dataType:’jsonp’,
jsonp:’callback’, //后端是php代码,可以获取到callback;请求时,在查询字符串的后面将callback写进,如果没有指定jsonp:’callback’,jQuery也会自动帮你指定
success:function(data){
if(data.success){
…
}else{
…
}
}
})
//请求值:=”>http://127.0.0.1:8080/server.php?callback=jQuery111111111111&=….
···
$jsonp=$_GET('callback'); $result=$jsonp.'({"success":false,"msg":"...",})'; echo $result //返回值:jQuery111111111111({'success':false,"msg":'....'})
4、处理跨域方法之三—— XHR2(或CORS,只支持get\post)
html5提供的XMLHttpRequest Level2已经释宪案的跨域访问以及其他的一些功能IE10以下的版本都不支持
在服务器端做一些小的改造即可
···服务器端php语言设置
header(‘Access-Control-Allow-Origin:‘) //指所有域都可以访问,也可以指定某个域可以访问
header(‘Access-Control-Allow-Method:POST,GET’)
例如:
···前端js
$.ajax({
type:'GET',
url:'http://127.0.0.1:8080/server.php',
dataType:'json',
success:function(data){
if(data.success){
}else{
}
}
})
//请求值:http://127.0.0.1:8080/server.php?callback=jQuery111111111111&_=....
···
```后台php
$jsonp=$_GET('callback'); $result=$jsonp.'({"success":false,"msg":"...",})'; echo $result //返回值:jQuery111111111111({'success':false,"msg":'....'})
上述是常见的几种跨域方式,当然还有很多种跨域方式,如XDR(IE8跨域解决方案),Cross-document messaging和 WebSocket(HTML5解决方案),document.domain、location.hash和window.name(iframe形式), flash socket …
详见 http://www.cnblogs.com/vajoy/p/4295825.html相关文章推荐
- ajax跨域访问报错501的解决方法
- 探秘ajax跨域请求
- NODE.JS跨域问题的完美解决方案
- 基于iframe实现ajax跨域请求 获取网页中ajax数据
- jquery ajax结合thinkphp的getjson实现跨域的方法
- jquery+thinkphp实现跨域抓取数据的方法
- PHP如何实现跨域
- JavaScript cookie 跨域访问之广告推广
- ie7下利用ajax跨域盗取cookie的解决办法
- javascript跨域的方法汇总
- 在Ajax中使用Flash实现跨域数据读取的实现方法
- 浅谈js中几种实用的跨域方法原理详解
- 详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
- AJAX实现跨域的三种方法(代理,JSONP,XHR2)
- js实现跨域访问的三种方法
- 如何设置iframe高度自适应在跨域情况下的可用方法
- 使用script的src实现跨域和类似ajax效果
- sso跨域写cookie的一段js脚本(推荐)
- javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
- js跨域问题之跨域iframe自适应大小实现代码