javascript - Why can cookies under the second-level domain name be obtained, but cannot be sent back automatically using ajax, and cookies cannot be cross-domain?

Scenario recurrence process:

<code>机器A局域网地址：192.168.9.8
机器B局域网地址：192.168.9.9
</code>

<code>分别配置机器A、B的hosts地址：

配置机器A的地址：192.168.9.8 --> a.site.com 
配置机器B的地址：192.168.9.9 --> b.site.com
</code>

Machine A is the front-end js code, starts the service, and requests the first address of machine B (representing the server side) on the browser http://b.site.com:8080/login/... , The server injects cookies at the same time as the request. Set the key of the cookie to 'site', the value to 'date', the doman to .site.com, and the path to /
. Then open a new page on the browser and make a request on the new page. http://a.site.com:8080/index, you can see the injected cookie through chrome console
http://b.site.com:8080/
, but... through ajax During the interface, the cookie did not appear in the request header. I tried various methods, including get, post, asynchronous, and synchronous, but none of them worked. Finally, the jsonp method was used, and the cookie appeared

The code that is not easy to use is as follows:

---

<code>$("a").click(function(event) {
        $.ajax({
            url: 'http://b.site.com:8080/test/test.htm',
            type: 'post',
            dataType: 'json',
            data: {'token': 'value'},
        })
        .done(function() {
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
});
</code>

The useful code is as follows:

<code>function flightHandler(data) {
    console.log(data);
    // body...
};

$("a").click(function(event) {
    $.ajax({
         type: "get",
         url: "http://b.site.com:8080/test/test.htm",
         dataType: "jsonp",
         jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
         jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
         success: function(data){
            console.log(data);
         },
         error: function(){
             alert('fail');
         }
     });
});
</code>

Please ask the experts for help. If you can solve the problem, thank you very much

Reply content:

Scenario recurrence process:

<code>机器A局域网地址：192.168.9.8
机器B局域网地址：192.168.9.9
</code>

<code>分别配置机器A、B的hosts地址：

配置机器A的地址：192.168.9.8 --> a.site.com 
配置机器B的地址：192.168.9.9 --> b.site.com
</code>

Machine A is the front-end js code, starts the service, and requests the first address of machine B (representing the server side) on the browser http://b.site.com:8080/login/... , The server injects cookies at the same time as the request. Set the key of the cookie to 'site', the value to 'date', the doman to .site.com, and the path to /

. Then open a new page on the browser and make a request on the new page. http://a.site.com:8080/index, you can see the injected cookie through chrome console

http://b.site.com:8080/
, but... through ajax During the interface, the cookie did not appear in the request header. I tried various methods, including get, post, asynchronous, and synchronous, but none of them worked. Finally, the jsonp method was used, and the cookie appeared



The code that is not easy to use is as follows:

<code>$("a").click(function(event) {
        $.ajax({
            url: 'http://b.site.com:8080/test/test.htm',
            type: 'post',
            dataType: 'json',
            data: {'token': 'value'},
        })
        .done(function() {
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
});
</code>

The useful code is as follows:

---

<code>function flightHandler(data) {
    console.log(data);
    // body...
};

$("a").click(function(event) {
    $.ajax({
         type: "get",
         url: "http://b.site.com:8080/test/test.htm",
         dataType: "jsonp",
         jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
         jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
         success: function(data){
            console.log(data);
         },
         error: function(){
             alert('fail');
         }
     });
});
</code>

Please ask the experts for help. If you can solve the problem, thank you very much

withCredentials=true, and ensure that the server allows cross-domain, please refer to cors

for details

A domain is not what you say it is. Cookie domain and ajax domain are not the same thing