Solution to the problem of cookie loss in Ajax cross-domain access_AJAX related

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(&#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

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 
 <meta>
 <script></script>
 <title> ajax 跨域访问cookie丢失的解决方法 </title>
 
 
 <script>
 $(function(){
  $.ajax({
   url: &#39;http://b.fdipzone.com/server.php&#39;, // 跨域
   dataType: &#39;json&#39;,
   type: &#39;post&#39;,
   data: {&#39;name&#39;:&#39;fdipzone&#39;},
   success:function(ret){
    if(ret[&#39;success&#39;]==true){
     alert(&#39;cookie:&#39; + ret[&#39;cookie&#39;]);
    }
   }
  });
 })
 </script>
 

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

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 
 <meta>
 <script></script>
 <title> ajax 跨域访问cookie丢失的解决方法 </title>
 
 
 <script>
 $(function(){
  $.ajax({
   url: &#39;http://b.fdipzone.com/server.php&#39;, // 跨域
   xhrFields:{withCredentials: true}, // 发送凭据
   dataType: &#39;json&#39;,
   type: &#39;post&#39;,
   data: {&#39;name&#39;:&#39;fdipzone&#39;},
   success:function(ret){
    if(ret[&#39;success&#39;]==true){
     alert(&#39;cookie:&#39; + ret[&#39;cookie&#39;]);
    }
   }
  });
 })
 </script>
 

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. 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!