JavaScript fetch POST request not setting cookie from same origin

Question

In my application I make an AJAX POST call with fetch to my API which, if successful, returns a 204 response and sets a cookie with the httpOnly and secure flags set. Following this, the JavaScript code then redirects to another page via:

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

But I'm seeing that the GET request that's made as a result of that direct doesn't include the cookie that was returned by the response from the earlier AJAX POST request. And for my application to work correctly I need that cookie to be sent with that GET request.

Here are the HTTP requests from the browser console:

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

Response:

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

And then the GET:

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

Response:

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

One thing to note in this example is that the response to the GET request includes a different sessionId cookie because the application, upon not receiving a cookie, will start a new session.

Also note that the pages and the API are all served from the same origin.

Update

After the accepted answer fixed this, I realised that I'd never checked that the browser was actually setting the cookie that came from the origin AJAX POST request. It turns out it wasn't. If I had have checked that, I might then have asked: how do I get the browser to accept that cookie?

Answer 1

Are you using whatwg-fetch ? If so, here is a very practical solution:

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

The key line there is credentials: 'same-origin'

This is how fetch tells your browser that it is okay to accept cookies from your request

Did this solution help?