Fetch Request header not sending cookies in chrome (v90.0.44), working in Firefox(v88.0) (JS)

  cookies, cors, fetch, google-chrome, javascript

Really struggling on getting a Fetch API call to send cookies along in the request headers in Chrome (also they are not being set from ‘Set-Cookie’ response headers from returned API responses in Chrome). Both however, work on Firefox.

Feel like I’ve tried a million solutions here, can someone explain what I’m guessing is the SameSite issues for Chrome?

Our base api URL is https://stage-api-v2.cbb.play

Aliased hosts file for localhost:

127.0.0.1       localhost
127.0.0.1       local.cbb.play

Cookie that is set that we are trying to forward along

import * as cookie from 'cookie';
import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
    res.setHeader(
        'Set-Cookie',
        cookie.serialize('refresh_token', req.body.token, {
            httpOnly: true,
            maxAge: 60 * 60,
            secure: process.env.NODE_ENV === 'production',
            path: '/',
            sameSite: 'lax',
            domain: '.cbb.play',
        })
    );
    res.statusCode = 200;
    res.json({ success: true });
};


Front end code that calls the API:

async function renewSession(payload) {
    return await fetch(process.env.BASE_URL + '/api/user/renew-session', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-type': 'application/json' },
        body: JSON.stringify(payload)
    })
}

Request header in Firefox:

POST /api/user/renew-session HTTP/2
Host: stage-api-v2.cbb.play
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: application/json
Accept-Language: en-CA,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: http://local.cbb.play:3000/
Content-Type: application/json
Origin: http://local.cbb.play:3000
Connection: keep-alive
Cookie: refresh_token=a49d51basasdfg4a569cc43b8603ac916f72c0102ace7b463d9c2; 
Pragma: no-cache
Cache-Control: no-cache
Content-Length: 0
TE: Trailers

Request Header in Chrome (no cookie):

:authority: stage-api-v2.cbb.play
:method: POST
:path: /api/user/renew-session
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
content-length: 0
content-type: application/json
origin: http://local.cbb.play:3000
pragma: no-cache
referer: http://local.cbb.play:3000
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Response Header: (Note, removed non-important properties)

access-control-allow-credentials: true
access-control-allow-headers: Set-Cookie, Credentials, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization
access-control-allow-methods: GET, HEAD, OPTIONS, POST, PUT, DELETE
access-control-allow-origin:http://local.cbb.play:3000
access-control-expose-headers: Content-Length,Content-Range,Set-cookie
content-encoding: gzip
content-type: application/json

Source: Ask Javascript Questions

LEAVE A COMMENT