Ajax跨域访问Cookie丢失问题的解决⽅法
ajax跨域访问，可以使⽤jsonp⽅法或设置Access-Control-Allow-Origin实现，关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的⽂章《》1.ajax跨域访问,cookie丢失
⾸先创建两个测试域名
a.fdipzone 作为客户端域名
b.fdipzone 作为服务端域名
测试代码
setcookie.PHP ⽤于设置服务端cookie
<?php
setcookie('data', time(), time()+3600);
>
server.php ⽤于被客户端请求
<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$ret = array(
'success' => true,
'name' => $name,
'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:a.fdipzone');
// 响应类型
header('Access-Control-Allow-Methods:POST');
/
/ 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('content-type:application/json');
echo json_encode($ret);
>
test.html 客户端请求页⾯
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="//code.jquery/jquery-1.11.0.min.js"></script>
<title> ajax 跨域访问cookie丢失的解决⽅法 </title>
</head>
<body>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'b.fdipzone/server.php', // 跨域
dataType: 'json',
type: 'post',
data: {'name':'fdipzone'},
success:function(ret){
if(ret['success']==true){
alert('cookie:' + ret['cookie']);
}
}
});
})
</script>
</body>
</html>
输出
{"success":true,"name":"fdipzone","cookie":""}
获取cookie失败。
2.解决⽅法
客户端
请求时将withCredentials属性设置为true
使可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求，会⽤下⾯的HTTP头部来响应。
服务端
设置header
header("Access-Control-Allow-Credentials:true");
允许请求带有验证信息
test.html 修改如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="//code.jquery/jquery-1.11.0.min.js"></script>
<title> ajax 跨域访问cookie丢失的解决⽅法 </title>
</head>
<body>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'b.fdipzone/server.php', // 跨域
xhrFields:{withCredentials: true}, // 发送凭据
dataType: 'json',
type: 'post',
发送ajax请求的步骤
data: {'name':'fdipzone'},
success:function(ret){
if(ret['success']==true){
alert('cookie:' + ret['cookie']);
}
}
});
})
</script>
</body>
</html>
server.php 修改如下
<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$ret = array(
'success' => true,
'name' => $name,
'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
/
/ 指定允许其他域名访问
header('Access-Control-Allow-Origin:a.fdipzone');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
// 是否允许请求带有验证信息
header('Access-Control-Allow-Credentials:true');
header('content-type:application/json');
echo json_encode($ret);
>
按之前步骤执⾏，请求返回
{"success":true,"name":"fdipzone","cookie":"1484558863"}
获取cookie成功
3.注意事项
1.如果客户端设置了withCredentials属性设置为true，⽽服务端没有设置Access-Control-Allow-Credentials:true，请求时会返回错误。
XMLHttpRequest cannot load b.fdipzone/server.php. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'a.fdipzone' is therefore not allowed access.
2.服务端header设置Access-Control-Allow-Credentials:true后，Access-Control-Allow-Origin不可以设为*，必须设置为⼀个域名，否则回返回错误。
XMLHttpRequest cannot load b.fdipzone/server.php. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' heade
下⾯看下Ajax跨域请求COOKIE⽆法带上的解决办法
原⽣ajax请求⽅式：
var xhr = new XMLHttpRequest();
xhr.open("POST", "xxxx/demo/b/index.php", true);
xhr.withCredentials = true; //⽀持跨域发送cookies
xhr.send();
jquery的ajax的post⽅法请求：
$.ajax({
type: "POST",
url: "xxx/api/test",
dataType: 'jsonp',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function(){
},
error:function(){
}
})
服务器端设置：
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: ");
以上所述是⼩编给⼤家介绍的Ajax跨域访问Cookie丢失问题的解决⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！