JavaScript获取POST请求未设置来自同一来源的cookie

在我的应用程序中，我使用

fetch

对我的API进行AJAX

POST

调用，如果成功，它将返回204响应，并使用httpOnly和secure标志集设置cookie。然后，JavaScript代码通过以下方式重定向到另一个页面：

window.location.href = '/other-page';

但是我发现，由于该直接请求而发出的

GET

请求不包括由早期AJAX

POST

请求的响应返回的cookie。为了让我的应用程序正常工作，我需要将cookie与

GET

请求一起发送

以下是来自浏览器控制台的HTTP请求：

POST https://example.com/api/v1/frobnicate [HTTP/1.1 204 No Content 338ms]

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.5
Connection: keep-alive
Content-Length: 53
Host: example.com
Referer: https://example.com/
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0content-typeapplication/x-www-form-urlencoded
origin: https://support/membership/friends

答复：

Accept-Ranges: bytes
Cache-Control: no-cache
Connection: keep-alive
Content-Security-Policy: frame-ancestors 'self'
Content-Type: text/html; charset=UTF-8
Date: Fri, 25 May 2018 14:24:08 GMT
Set-Cookie: sessionId=abc-123; path=/; secure; httponly

Accept-Ranges: bytes
Age: 0
Cache-Control: private
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 14195
Content-Security-Policy: frame-ancestors 'self'
Content-Type: text/html; charset=utf-8
Date: Fri, 25 May 2018 14:24:08 GMT
Set-Cookie: sessionId=xyz-789; path=/; HttpOnly
Vary: Accept-Encoding

然后得到：

GET https://example.com/other-page [HTTP/1.1 200 OK 183ms]

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.5
Connection: keep-alive
Cookie: cookieconsent=1
Host: example.com
Referer: https://example.com/
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0

答复：

Accept-Ranges: bytes
Cache-Control: no-cache
Connection: keep-alive
Content-Security-Policy: frame-ancestors 'self'
Content-Type: text/html; charset=UTF-8
Date: Fri, 25 May 2018 14:24:08 GMT
Set-Cookie: sessionId=abc-123; path=/; secure; httponly

Accept-Ranges: bytes
Age: 0
Cache-Control: private
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 14195
Content-Security-Policy: frame-ancestors 'self'
Content-Type: text/html; charset=utf-8
Date: Fri, 25 May 2018 14:24:08 GMT
Set-Cookie: sessionId=xyz-789; path=/; HttpOnly
Vary: Accept-Encoding

在本例中需要注意的一点是，对

GET

请求的响应包含不同的

sessionId

cookie，因为应用程序在未收到cookie时将启动新会话

还要注意的是，页面和API都来自同一个来源

更新

---

在被接受的答案解决了这个问题之后，我意识到我从来没有检查过浏览器是否真正设置了来自原始AJAX

POST

请求的cookie。原来不是。如果我已经检查过了，那么我可能会问：如何让浏览器接受cookie？

您使用的是

whatwg fetch

？如果是这样，这里有一个非常实用的解决方案：

fetch('/https://example.com/api/v1/frobnicate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: {},
  credentials: 'same-origin',
})

这里的关键行是

凭证：“同一来源”

这就是

fetch

告诉浏览器可以接受您请求的cookie的方式

---

这个解决方案有用吗？

是的，我正在使用

fetch

。这个解决方案是有效的。因此，问题实际上在于原始的

POST

请求，而不是后续的

GET

请求？我将编辑我的问题以反映这一点。