An explanation of the solution to cookie loss in ajax cross-domain access-JS Tutorial-php.cn

An explanation of the solution to cookie loss in ajax cross-domain access

jacklove

Release： 2018-06-08 17:58:40

Original

2083 people have browsed it

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 realizes cross-domain access》

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 Used to set server cookies

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

Copy after login

server.php 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,    &#39;name&#39; => $name,    &#39;cookie&#39; => isset($_COOKIE[&#39;data&#39;])? $_COOKIE[&#39;data&#39;] : &#39;&#39;);// 指定允许其他域名访问header(&#39;Access-Control-Allow-Origin:http://a.fdipzone.com&#39;);// 响应类型header(&#39;Access-Control-Allow-Methods:POST&#39;);  

// 响应头设置header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);

header(&#39;content-type:application/json&#39;);echo json_encode($ret);?>

Copy after login

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

 </body></html>

Copy after login

First execute http://b.fdipzone.com/setcookie.php to create a server-side cookie .
Then execute http://a.fdipzone.com/test.html

Output

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

Copy after login

Failed to obtain cookies.

2. Solution

Client
Set the withCredentials attribute to # when requesting ##true 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");

Copy after login

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

 </body></html>

Copy after login

server.php Modify as follows

<?php$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;$ret = array(    &#39;success&#39; => true,    &#39;name&#39; => $name,    &#39;cookie&#39; => isset($_COOKIE[&#39;data&#39;])? $_COOKIE[&#39;data&#39;] : &#39;&#39;);// 指定允许其他域名访问header(&#39;Access-Control-Allow-Origin:http://a.fdipzone.com&#39;);// 响应类型header(&#39;Access-Control-Allow-Methods:POST&#39;);  

// 响应头设置header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);// 是否允许请求带有验证信息header(&#39;Access-Control-Allow-Credentials:true&#39;);

header(&#39;content-type:application/json&#39;);echo json_encode($ret);?>

Copy after login

Follow the previous steps, and the request returns

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

Copy after login

The cookie is obtained successfully

3. Notes

1. 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 when requesting.

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. Credentials flag is &#39;true&#39;, but the &#39;Access-Control-Allow-Credentials&#39; header is &#39;&#39;. It must be &#39;true&#39; to allow credentials. Origin &#39;http://a.fdipzone.com&#39; is therefore not allowed access.

Copy after login

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 &#39;*&#39; cannot be used in the &#39;Access-Control-Allow-Origin&#39; header when the credentials flag is true. Origin &#39;http://a.fdipzone.com&#39; is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

Copy after login

This article explains how to solve the problem of cookie loss in ajax cross-domain access. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:

Explanation on the calculation method of key_len in mysql explain

How to use curl to simulate ip and Source access

#Convert NULL data through mysql method

The above is the detailed content of An explanation of the solution to cookie loss in ajax cross-domain access. For more information, please follow other related articles on the PHP Chinese website!