什么情况下存在跨域,参考下表:URL说明是否允许通信
http://www.a.com/a.js http://www.a.com/b.js同一域名下允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js同一域名下不同文件夹允许
http://www.a.com:8000/a.js http://www.a.com/b.js同一域名,不同端口不允许
http://www.a.com/a.js https://www.a.com/b.js同一域名,不同协议不允许
http://www.a.com/a.js http://170.32.82.74/b.js域名和域名对应ip不允许
http://www.a.com/a.js http://script.a.com/b.js同一域名,不同二级域名不允许
http://www.a.com/a.js http://a.com/b.js二级域名和一级域名不允许(cookie这种情况下也不允许访问)
http://www.b.com/a.js http://www.a.com/b.js不同域名不允许
下面介绍两种解决跨域方法,这两种方式都是在php后台进行处理。
第一种方式:HTML5 XHR2
php<?php
/**
* @authors Rehack (565195693@qq.com)
* @date 2016-05-03 20:31:40
* @version $Id$
*/
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('content-type: application/json; charset=utf-8');
$arr=array("name"=>"Rehack","sex"=>"male","age"=>20,"address"=>"Sichuan");
echo json_encode($arr);
?>
html
Access-Control-Allow-Origin$(function(){
$.ajax({
url:"http://test.rehack.cn/json.php",
type:"post",
dataType:"json"
})
.done(function(data){
console.log(data);
})
.fail(function(){
alert("error");
})
})
最重要的一段代码就是header('Access-Control-Allow-Origin:*'); ,这里*意思是允许所有域名的脚本访问该资源。
也可以只允许某个域名访问该资源,header('Access-Control-Allow-Origin:http://www.rehack.cn'); ,表示只有http://www.rehack.cn这个域名才能访问该资源,当然本身域名下(同源)也能访问。如果需要指定多个域名,用逗号隔开,header('Access-Control-Allow-Origin:http://www.rehack.cn');
下面是一些常用的Access-Control头部
请求头:
Access-Control-Request-Method : 先导请求中的请求头,告诉服务器真实请求的http方法
Access-Control-Request-Headers :先导请求中的请求头,告诉服务器真实请求的http请求头
响应头:
Access-Control-Allow-Origin :服务器允许跨域请求的origin
Access-Control-Expose-Headers : 允许JavaScript读取的头部
Access-Control-Allow-Credentials :是否允许携带cookie
Access-Control-Allow-Methods :允许的请求方法
Access-Control-Allow-Headers :允许的请求头部
Access-Control-Allow-Origin这种方式在ie10以下是不支持的,所以下面介绍第二种兼容的方式。
第二种方式:jsonp
在后端设置callback
php<?php
/**
* @authors Rehack (565195693@qq.com)
* @date 2016-05-03 21:37:58
* @version $Id$
*/
$arr=array("name"=>"Rehack","sex"=>"male","age"=>20,"address"=>"Sichuan");
$result=json_encode($arr);
$callback=$_GET['callback'];
echo $callback."($result)";
html:
jsonp$(function(){
$.ajax({
url:"http://test.rehack.cn/json2.php",
type:"get",
dataType:"jsonp",
jsonp:"callback"//默认情况下为callback,可以不写,也可以自定义,但和后台需要对应
})
.done(function(data){
console.log(data);
})
.fail(function(){
alert("error");
})
})
当然好事多磨,jsonp也是有缺陷的,只支持GET请求,不支持POST等其它类型的HTTP请求。
上面两种方式都是常用的解决跨域问题的方法,可以自己研究下。
最后再留下两个问题:
1.用iframe解决跨域
2.跨域后操作cookie
前面两种是比较常见的跨域处理方案,另外再提供三种参考方案:window.name+iframe
window.location.hash+iframe
html5 postMessage+ifrme