为什么 AJAX 请求返回后浏览器不设置 cookie？

Question

我正在使用 $.ajax 发出 ajax 请求。响应具有 Set-Cookie 标头集（我已经在 Chrome 开发工具中验证了这一点）。但是，浏览器在收到响应后不设置cookie！当我导航到我域中的另一个页面时，不会发送 cookie。 （注意：我没有做任何跨域 ajax 请求；请求与文档在同一个域中。）

我错过了什么？

编辑：这是我的 ajax 请求的代码：

$.post('/user/login', JSON.stringify(data));

这是请求，如 Chrome 开发工具所示：

Request URL:https://192.168.1.154:3000/user/login
Request Method:POST
Status Code:200 OK

Request Headers:
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:35
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
DNT:1
Host:192.168.1.154:3000
Origin:https://192.168.1.154:3000
Referer:https://192.168.1.154:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36
X-Requested-With:XMLHttpRequest

Form Data:
{"UserId":"blah","Password":"blah"}:

回复：

Response Headers:
Content-Length:15
Content-Type:application/json; charset=UTF-8
Date:Sun, 16 Mar 2014 03:25:24 GMT
Set-Cookie:SessionId=MTM5NDk0MDMyNHxEdi1CQkFFQ180SUFBUkFCRUFBQVRfLUNBQUVHYzNSeWFXNW5EQXNBQ1ZObGMzTnBiMjVKWkFaemRISnBibWNNTGdBc1ZFcDNlU3RKVFdKSGIzQlNXRkkwVjJGNFJ6TlRVSHA0U0ZJd01XRktjMDF1Y1c1b2FGWXJORzV4V1QwPXwWf1tz-2Fy_Y4I6fypCzkMJyYxhgM3LjVHGAlKyrilRg==; HttpOnly

Answer 1

@atomkirk 的 answer 不适用于我，因为

1. 我不使用fetch API
2. 我正在发出跨站点请求（即 CORS）

注意：如果您的服务器使用Access-Control-Allow-Origins:*（又名“所有来源”/“通配符来源”），您可能无法发送凭据（请参阅下面）。

至于fetch API； CORS 请求将 need {credentials:'include'} 用于发送和接收 cookie

对于 CORS 请求，使用“include”值来允许发送 其他域的凭据：

fetch('https://example.com:1234/users', {   
            credentials: 'include' 
})

...要选择接受来自服务器的 cookie，您必须使用凭据选项。

---

{credentials:'include'} 只是设置xhr.withCredentials=true

Check fetch code

if (request.credentials === 'include') {
      xhr.withCredentials = true
 } 

所以plain Javascript/XHR.withCredentials是重要的部分。

---

如果你使用 jQuery，你 can set withCredentials（记得使用 crossDomain: true）使用 $.ajaxSetup(...)

$.ajaxSetup({
             crossDomain: true,
             xhrFields: {
                 withCredentials: true
             }
         });

---

如果您使用的是 AngularJS，$http service config arg 接受 withCredentials 属性：

$http({
    withCredentials: true
});

---

如果您使用 Angular (Angular IO)，common.http.HttpRequest service options arg 接受 withCredentials 属性：

this.http.post<Hero>(this.heroesUrl, hero, {
    withCredentials: true
});

---

至于请求，当xhr.withCredentials=true；发送 Cookie 标头

在我改变之前xhr.withCredentials=true

1. 我可以在响应中看到 Set-Cookie 名称和值，但开发者工具中 Chrome 的“应用程序”选项卡向我显示了名称和 空值
2. 后续请求未发送Cookie 请求标头。

更改后xhr.withCredentials=true

1. 我可以在 Chrome 的“应用程序”选项卡中看到 cookie 的 名称 和 cookie 的 值（与 Set-Cookie 一致的值标题）。
2. 后续请求确实发送了具有相同值的 Cookie 请求标头，因此我的服务器将我视为“已验证”

---

至于响应：服务器可能需要某些Access-Control... 标头

例如，我将服务器配置为返回这些标头：

• 访问控制允许凭据：true
• Access-Control-Allow-Origin:https://{your-origin}:{your-port}

编辑：如果您允许all origins/wildcard origins, as described here（感谢@ChandanBhattad），此方法将不起作用：

尝试使用设置了凭据标志的 CORS 请求，但服务器使用通配符 ("*") 作为 Access-Control-Allow-Origin 的值进行配置，这不允许使用凭据。

在我对响应标头进行此服务器端更改之前，Chrome 会在控制台中记录错误，例如

无法加载 https://{saml-domain}/saml-authn：从 https://{saml-domain}/saml-redirect 重定向已被 CORS 策略阻止：

响应中'Access-Control-Allow-Credentials' 标头的值为''，当请求的凭据模式为'include' 时，必须为'true'。 Origin https://{your-domain} 因此不允许访问。

XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

在进行此 Access-* 标头更改后，Chrome 没有记录错误；浏览器让我检查所有后续请求的经过身份验证的响应。

Answer 2

在我的例子中，cookie 大小超过了 4096 字节（谷歌浏览器）。我有一个会增加大小的动态 cookie 有效负载。

如果 cookie 超出浏览器限制，浏览器将忽略 set-cookie 响应头，并且不会设置 cookie。

See here 用于每个浏览器的 cookie 大小限制。

我知道这不是解决方案，但这是我的问题，我希望它可以帮助某人:)

Answer 3

这可能会帮助某人随机遇到这个问题。

我发现强制使用 https:// 而不是 http:// 的 URL，即使服务器没有证书并且 Chrome 抱怨会解决这个问题。

Answer 4

好的，所以我终于找到了问题所在。事实证明，在 AJAX 请求中发送 cookie 时，设置 Path 选项很重要。如果设置Path=/，例如：

Set-Cookie:SessionId=foo; Path=/; HttpOnly

...那么当您导航到不同的页面时，浏览器将设置 cookie。不设置Path，浏览器使用“默认”路径。显然，AJAX 请求设置的 cookie 的默认路径与直接导航到页面时使用的默认路径不同。我正在使用 Go/Martini，所以在服务器端我这样做：

session.Options(session.Options{HttpOnly: true, Path:"/"})

我猜是 Python/Ruby/等。有类似的机制来设置Path。

另请参阅：cookies problem in PHP and AJAX

Answer 5

如果您使用新的fetch API，可以尝试包含credentials：

fetch('/users', {
  credentials: 'same-origin'
})

这就是为我解决的问题。

特别是使用 polyfill：https://github.com/github/fetch#sending-cookies