著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/cors-post.html#comments
来源:http://caibaojian.com
很多人以为(包括我之前也是)跨域只需要后端Apach返回的标头中Header set Access-Control-Allow-Origin: *”,就可以放心的使用,今天再跟大家说一次,这个CORS(跨域资源共享)的方案在POST下并不兼容IE7及以下,IE8-IE9则需要使用window.XDomainRequest.来兼容。
比较常用的跨域有jsonp和cors,本文将围绕这两个点来展开。
使用JSONP
虽然jsonp可以支持跨域ajax请求,但是jsonp只支持GET的方式,并不支持post方式,当使用表单发送数据或者数据量较大和安全性较高要求的情况下,你就只能使用post方式了。
$.ajax({
url : "http://top.caibaojian.com/cross-domain-cors/jsonp.php",
dataType:"jsonp",
});
function mycallback(data)
{
alert("Here: "+data.name);
}
jsonp.php 的响应:
mycallback({"name":"Ravishanker","age":32,"location":"India"})
如果要自动处理函数,可以使用下面的方法。在这种情况下,你不需要有任何额外的功能。您可以在成功回调中获得服务器响应。
$.ajax({
url : "http://top.caibaojian.com/cross-domain-cors/jsonp.php",
dataType:"jsonp",
jsonp:"mycallback",
success:function(data)
{
alert("Name:"+data.name+"nage:"+data.age+"nlocation:"+data.location);
}
});
<?php
$callback ='mycallback';
if(isset($_GET['mycallback']))
{
$callback = $_GET['mycallback'];
}
$arr =array();
$arr['name']="Ravishanker";
$arr['age']=32;
$arr['location']="India";
echo $callback.'(' . json_encode($arr) . ')';
?>
使用CORS
设置标头
// PHP
header("Access-Control-Allow-Origin: *");
// Apache (.htaccess)
Header set Access-Control-Allow-Origin "*"
预处理
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// "withCredentials"属性是XMLHTTPRequest2中独有的
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// 检测是否XDomainRequest可用
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 看起来CORS根本不被支持
xhr = null;
}
return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}
绝大多数情况下,我们只需要和onload及onerror打交道,就像下面这样:
xhr.onload = function() {
var responseText = xhr.responseText;
console.log(responseText);
// 继续其它代码
};
xhr.onerror = function() {
console.log('There was an error!');
};
简单请求
不发送自定义header(如x-pingother,等)
只使用GET、POST或header的方法
<script type="text/javascript">
// Using jQuery
$.get("http://www.example.org/ajax.php").done(function (data) {
console.log(data);
});
// Using XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.org/ajax.php", true);
xhr.onload = function () {
console.log(xhr.responseText);
};
xhr.send();
</script>
widthCredentials
默认情况下,非同一来源的请求,浏览器不会发送凭据(如HTTP cookies,HTTP认证和客户端的SSL证书)。如果有需要则需要在设置XMLHttpRequest对象时加一个特定的属性调用。
<script type="text/javascript">
// Using jQuery
$.ajax({
xhrFields: {
withCredentials: true
},
type: "GET",
url: "http://www.example.org/ajax.php"
}).done(function (data) {
console.log(data);
});
// Using XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.org/ajax.php", true);
xhr.withCredentials = true;
xhr.onload = function () {
console.log(xhr.responseText);
};
xhr.send();
</script>
后端响应
<?php
// http://www.example.org/ajax.php
if (!isset($_SERVER['HTTP_ORIGIN'])) {
// This is not cross-domain request
exit;
}
$wildcard = FALSE; // Set $wildcard to TRUE if you do not plan to check or limit the domains
$credentials = FALSE; // Set $credentials to TRUE if expects credential requests (Cookies, Authentication, SSL certificates)
$allowedOrigins = array('http://caibaojian.com', 'http://jsfiddle.net');
if (!in_array($_SERVER['HTTP_ORIGIN'], $allowedOrigins) && !$wildcard) {
// Origin is not allowed
exit;
}
$origin = $wildcard && !$credentials ? '*' : $_SERVER['HTTP_ORIGIN'];
header("Access-Control-Allow-Origin: " . $origin);
if ($credentials) {
header("Access-Control-Allow-Credentials: true");
}
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Origin");
header('P3P: CP="CAO PSA OUR"'); // Makes IE to support cookies
// Handling the Preflight
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
exit;
}
// Response
header("Content-Type: application/json; charset=utf-8");
echo json_encode(array('status' => 'OK'));
?>
一些笔记:
当 credentials 设为真时,通配符“*”不能用于’Access-Control-Allow-Origin’
当进行同步请求时,Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 不再支持使用withcredentials属性
浏览器支持:
Chrome 3+, Firefox 3.5+, IE 10+, Opera 12+, Safari 4+
兼容IE8的插件
https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
1.只能是GET or POST请求,在使用post时,数据总是发送一个 Content-Type 为text/plain的
2.只能是HTTP或者HTTPS,并且双方的协议需要一致
3.总是使用异步请求
引入插件
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>
var contentType ="application/x-www-form-urlencoded; charset=utf-8";
if(window.XDomainRequest) //for IE8,IE9
contentType = "text/plain";
$.ajax({
url:"http://top.caibaojian.com/cross-domain-cors/post.php",
data:"name=Ravi&age=12",
type:"POST",
dataType:"json",
contentType:contentType,
success:function(data)
{
alert("Data from Server"+JSON.stringify(data));
},
error:function(jqXHR,textStatus,errorThrown)
{
alert("You can not send Cross Domain AJAX requests: "+errorThrown);
}
});
post.php代码
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
if(isset($HTTP_RAW_POST_DATA)) {
parse_str($HTTP_RAW_POST_DATA,$arr);
$arr['extra']='1.POST Request from caibaojian.com';
echo json_encode($arr);
}
else
{
$_POST['extra']='2.POST Request from caibaojian.com';
echo json_encode($_POST);
}
?>