The solution of Ajax cross-domain access cookie loss problem _ajax related

This Ajax cross-domain access, you can use the Jsonp method or set the Access-control-allow-origin implementation, about setting Access-control-allow-origin for cross-domain access can refer to the article I wrote before the Ajax Set Access-control-allow-origin for cross-domain access the article mainly introduced the Ajax cross-domain Access cookie loss problem solution, the need for friends can refer to, hope to help everyone.

1.ajax cross-domain access, cookie loss

Create two test domain names first

A.fdipzone.com as the client domain name

B.fdipzone.com as a service-side domain name

Test code

Setcookie. PHP for setting server-side cookies

<?phpsetcookie (' Data ', Time (), Time () +3600);? >

Server.php used by clients to request

<?php$name = isset ($_post[' name '])? $_post[' name ']: '; $ret = Array (' success ' = ' = ', ' name ' = ' = ' $name, ' cookie ' = ' isset ($_cookie[' data ')? $_cook ie[' data ');//Specifies that other domain names are allowed to access the header (' access-control-allow-origin:http://a.fdipzone.com ');//Response Type header (' Access-control-allow-methods:post '); The response header sets the 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" >
First, execute the http://b.fdipzone.com/setcookie.php and create the server cookie.

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

Output

{"Success": True, "name": "Fdipzone", "Cookie": ""}
Failed to get cookie.

2. Workaround

Client

Set the Withcredentials property to True when requested

Enables you to specify that a request should send credentials. If the server receives a request with credentials, it responds with the HTTP header below.

Service side

Set Header

Header ("Access-control-allow-credentials:true");
Allow request with authentication information

Test.html modified as follows

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Server.php modified as follows

<?php$name = isset ($_post[' name '])? $_post[' name ']: '; $ret = Array (' success ' = ' = ', ' name ' = ' = ' $name, ' cookie ' = ' isset ($_cookie[' data ')? $_cook ie[' data ');//Specifies that other domain names are allowed to access the header (' access-control-allow-origin:http://a.fdipzone.com ');//Response Type header (' Access-control-allow-methods:post '); The response header sets the header (' Access-control-allow-headers:x-requested-with,content-type ');//whether to allow request with authentication information header (' Access-control-allow-credentials:true '); header (' Content-type:application/json '); Echo Json_encode ($ret);? >
Follow previous steps, request return

{"Success": True, "name": "Fdipzone", "Cookie": "1484558863"}
Get Cookie Success

3. Precautions

1. If the client set the Withcredentials property to True and the server does not set access-control-allow-credentials:true, the request returns an error.

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. Credentials flag is ' true ' and the ' access-control-allow-credentials ' header is '. It must is ' true ' to allow credentials. Origin ' http://a.fdipzone.com ' is therefore not allowed access.
2. After the server header is set access-control-allow-credentials:true, Access-control-allow-origin cannot be set to *, must be a domain name, or return an error back.

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. A Wildcard ' * ' cannot is used in the ' Access-control-allow-origin ' Heade
Here's a workaround for Ajax cross-domain request cookies

Native Ajax Request Mode:

var xhr = new XMLHttpRequest (); Xhr.open ("POST", "http://xxxx.com/demo/b/index.php", true); Xhr.withcredentials = true; Support for cross-domain send Cookiesxhr.send ();
The Ajax Post method request for jquery:

$.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 implementation of Ajax cross-domain request flask Response Content

Ajax cross-domain request cookie can't be brought on the perfect solution

An example of the principle of Ajax cross-domain requests