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

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

server.php is used to be requested by the client

 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

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

server.php is modified as follows

 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!

Recommended reading:

Using Ajax to implement registration and avatar upload functions

Detailed explanation of the steps for using ajax to implement paging technology (with code )

What is the difference between async:false and async:true in Ajax requests

The above is the detailed content of How to solve the problem of cookie loss during Ajax cross-domain access. For more information, please follow other related articles on the PHP Chinese website!