Home >Backend Development >PHP Tutorial >Solution to the problem of cookie loss in Ajax cross-domain access_AJAX related
Solution to the problem of cookie loss in Ajax cross-domain access_AJAX related
- 小云云Original
- 2018-01-08 13:07:202505browse
This ajax cross-domain access can be achieved using the jsonp method or setting Access-Control-Allow-Origin. Regarding setting Access-Control-Allow-Origin to achieve cross-domain access, you can refer to the article I wrote before "ajax setting Access-Control" -Allow-Origin to achieve cross-domain access" article mainly introduces the solution to the problem of cookie loss in Ajax cross-domain access. Friends in need can refer to it. I hope it can help everyone.
1.ajax cross-domain access, cookie loss
First create two test domain names
a.fdipzone.com as the client domain name
b. fdipzone.com as the server domain name
Test code
setcookie.PHP is used to set the server cookie
<?php setcookie('data', time(), time()+3600); ?>
server.php is used to be requested by the client
<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$ret = array(
'success' => true,
'name' => $name,
'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:http://a.fdipzone.com');
// 响应类型
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 Client request page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<title> ajax 跨域访问cookie丢失的解决方法 </title>
</head>
<body>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'http://b.fdipzone.com/server.php', // 跨域
dataType: 'json',
type: 'post',
data: {'name':'fdipzone'},
success:function(ret){
if(ret['success']==true){
alert('cookie:' + ret['cookie']);
}
}
});
})
</script>
</body>
</html>
First execute http://b.fdipzone.com/setcookie.php to create a server cookie.
Then execute http://a.fdipzone.com/test.html
Output
{"success":true,"name":"fdipzone","cookie":""}
Failed to obtain cookies.
2. Solution
Client
Set the withCredentials attribute to true when making a request
so that you can specify that credentials should be sent for a certain request. If the server receives a request with credentials, it will respond with the following HTTP headers.
Server
Set header
header("Access-Control-Allow-Credentials:true");
Allow requests with verification information
test.html Modify as follows
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<title> ajax 跨域访问cookie丢失的解决方法 </title>
</head>
<body>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'http://b.fdipzone.com/server.php', // 跨域
xhrFields:{withCredentials: true}, // 发送凭据
dataType: 'json',
type: 'post',
data: {'name':'fdipzone'},
success:function(ret){
if(ret['success']==true){
alert('cookie:' + ret['cookie']);
}
}
});
})
</script>
</body>
</html>
server.php is modified as follows
<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$ret = array(
'success' => true,
'name' => $name,
'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:http://a.fdipzone.com');
// 响应类型
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);
?>
Follow the previous steps and the request returns
{"success":true,"name":"fdipzone","cookie":"1484558863"}
Getting the cookie successfully
3. Notes
1. If the client The withCredentials attribute is set to true, but the server does not set Access-Control-Allow-Credentials:true, and an error will be returned during the request.
XMLHttpRequest cannot load http://b.fdipzone.com/server.php. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://a.fdipzone.com' is therefore not allowed access.
2. After the server header sets Access-Control-Allow-Credentials: true, Access-Control-Allow-Origin cannot be set to * and must be set to a domain name, otherwise an error will be returned.
XMLHttpRequest cannot load http://b.fdipzone.com/server.php. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' heade
Let’s take a look at the solution to the problem that COOKIE cannot be brought with Ajax cross-domain requests
Native ajax request method:
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);
xhr.withCredentials = true; //支持跨域发送cookies
xhr.send();
jquery’s ajax post method request:
$.ajax({
type: "POST",
url: "http://xxx.com/api/test",
dataType: 'jsonp',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function(){
},
error:function(){
}
})
Server-side settings:
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");
Related recommendations:
JS implements Ajax cross-domain request flask response content
Ajax cross The perfect solution for domain request COOKIE that cannot be brought
Detailed example of the principle of Ajax cross-domain request
The above is the detailed content of Solution to the problem of cookie loss in Ajax cross-domain access_AJAX related. For more information, please follow other related articles on the PHP Chinese website!