即使响应包含'Set-Cookie'头，对于ajax请求在浏览器上未存储cookie。

Question

即使ajax请求的响应包含“Set-Cookie”头，cookie也不会存储在浏览器中。

请求代码：

function hitLogin(){
        var loginUrl = "http://myapp:8080/login";

        var geturl;
        $.ajax({

            type: "GET",
            url : loginUrl,
            data:   {
            user : "user1",
            password : "encryptedPassword"              
            },              
            headers: {
                "credentials": 'include',
                "withCredentials" : true,
                "crossDomain": true,
                "X-Requested-With" : "XMLHttpRequest",
                "Content-type" : "application/x-www-form-urlencoded",
                "Accept":"text/plain",
            },              

            success : function(data)
            {                   
                alert("Ajax request data: "+data);
            },
            error: function( xhr, status, error ) 
            {
                alert("Ajax request error: "+status ); 
            }
        }); 
        }

收到的响应头:

Access-Control-Allow-Credentials:true

Access-Control-Allow-Headers:X-Requested-With,accept,content-type,Cookie

Access-Control-Allow-Methods:POST,GET,PUT,OPTIONS,DELETE

Access-Control-Allow-Origin:http://myapp2.com:7011

Access-Control-Max-Age:3600

Content-Encoding:gzip

Content-Type:text/plain;charset=ISO-8859-1

Date:Wed, 06 Jun 2018 15:10:09 GMT

Server:Apache-Coyote/1.1

Set-Cookie:MYCOOKIE=62lml5_S7qS31KaFDg-SH-e8Ds5FPjljCIHzfmhxMAr8Fdrqr6fHLjI7s2XPAO2P3tNFLNLS1_fgvDXF4pLmfg#1s1S1#normal-false; Path=/; HttpOnly

Transfer-Encoding:chunked

Vary:Accept-Encoding

withCredentials:true

我可以在浏览器中访问相同的URL时看到存储的cookie，但是在ajax请求的情况下，它没有被存储。因此无法发送需要该cookie的后续请求。

- AmM

Answer 1

你正在将 withCredentials: true 作为 HTTP 标头发送，但这并没有什么用。相反，你应该将其设置为 XHR field。在 jQuery 中，你可以这样做：

$.ajax({
    type: "GET",
    url: loginUrl,
    data: { /* request parameters here */ },
    headers: { /* custom HTTP headers here, if you need any */ },
    xhrFields: {
        withCredentials: true,
    },
    /* other AJAX settings here */
})

此外，您发送的所有其他自定义HTTP标头实际上也是无用的：

• credentials: include 不是有效的HTTP头部，也不是XHR字段或jQuery AJAX设置。相反，它似乎是Fetch API中与jQuery的withCredentials: true等效的设置。无论如何，在这里它都是无用的。

• crossDomain 也不是HTTP头部。它可以作为jQuery AJAX设置（即在headers对象之外）使用，以便强制jQuery将请求视为跨域请求，即使目标URL看起来与当前页面的域匹配。在您的情况下，它也是无用的。

• X-Requested-With: XMLHttpRequest HTTP头部由jQuery自动添加，因此将其指定为自定义头部是100％多余的。

• 没有必要显式发送HTTP Content-Type头部，因为jQuery会自动生成一个。如果您希望指定jQuery应在请求中使用哪种内容类型，则应在headers之外使用contentType设置进行设置。无论如何，您指定的那个是默认值。

• 类似地，您应该使用jQuery $.ajax()设置accepts和/或dataType来控制jQuery将接受哪些响应中的内容类型。通常情况下，您不需要这样做，因为jQuery使用的默认值很好，除非您的服务器配置错误并发送了错误的内容类型。

- Ilmari Karonen

---

是的，有些标题可能没有用，但我的主要关注点是浏览器上未存储cookie。我们需要任何显式处理/标题吗？ - AmM

@AmM：不，只需要withCredentials: true XHR字段就可以了。它只需要放在正确的位置，即xhrFields中，而不是headers中。 - Ilmari Karonen

Answer 2

如上所述，这是CORS的情况，因此jquery请求无法设置cookie。

通过CORS进行Ajax请求时在浏览器上设置Cookie

帮助找到原因，并能够使用withCredentials设置为true的XMLHttpRequest存储cookie。

- AmM