Home >Web Front-end >JS Tutorial >How to solve the problem of cookie loss during Ajax cross-domain access

How to solve the problem of cookie loss during Ajax cross-domain access

php中世界最好的语言Original: 2018-04-02 16:05:271785browse

This time I will bring you how to solve the problem of cookie loss during Ajax cross-domain access. What are the precautions ? The following is a practical case. Let’s take a look. 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》

1.ajax cross-domain access, cookie lossFirst 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 Server cookie

<?php
setcookie(&#39;data&#39;, time(), time()+3600);
?>

server.php is used to be requested by the client

<?php
$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;
$ret = array(
 &#39;success&#39; => 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, creates a server-side cookie.

Then execute http://a.fdipzone.com/test.html

Output

{"success":true,"name":"fdipzone","cookie":""}

Failed to obtain cookie.

2. Solution

Client

Set the withCredentials attribute to true when requesting

Enables you to 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[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;
$ret = array(
 &#39;success&#39; => 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. Notes1. If the client sets the withCredentials attribute to true, but the server does not set Access-Control-Allow-Credentials:true, 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");

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to solve the problem of cookie loss during Ajax cross-domain access

Related articles