Question

在我的应用程序中，我使用POST与我的API进行AJAX fetch调用，如果成功，则返回204响应，并设置一个设置了httpOnly和安全标志的cookie。然后，JavaScript代码通过以下方式重定向到另一个页面：

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

但是我看到由于直接而导致的GET请求包含了来自早期AJAX {{1}的响应返回的cookie请求。为了使我的应用程序正常工作，我需要使用POST请求发送cookie。

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

GET

响应：

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

然后是GET：

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

响应：

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 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 Cookie，因为应用程序在未收到cookie时将启动一个新的会议。

另请注意，页面和API均来自同一个来源。

更新

在接受的答案修复后，我意识到我从未检查过浏览器实际设置的是来自原始AJAX sessionId请求的cookie。事实证明它不是。如果我已经检查过，那么我可能会问：如何让浏览器接受该cookie？

Answer 1

您使用的是whatwg-fetch吗？如果是这样，这是一个非常实用的解决方案：

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

关键字是credentials: 'same-origin'

fetch告诉您的浏览器可以接受您的请求中的Cookie

这个解决方案有帮助吗？

JavaScript获取POST请求而不是设置来自同一来源的Cookie

1 个答案: