自定义 cookie 发送到浏览器但未存储

Question

I've tried multiple configuration and read multiple posts about this issue but I'm still lost.

The custom cookie sent by my api server is received by the browser but never stored. And I can't figure out why.

I developed a node/express api server deployed on heroku.

My front-end uses Vuejs and is deployed on firebase.

Here are the code related to my cookie configuration:

SERVER-SIDE

Cors

app.use(
    cors({
        origin: 'https://my-app.firebaseapp.com',
        credentials: true,
    exposedHeaders: ['customCookie']
    })
);

Set-cookie

const cookieOptions = {
    httpOnly: true,
    sameSite: 'None',
    expires: expirationDate,
    secure: true,
    path: '/',
    domain: 'https://my-app.firebaseapp.com',
};

res.cookie('customCookie', 'value', cookieOptions)

CLIENT-SIDE

Axios

axios.defaults.baseURL = 'https://my-app.herokuapp.com';
axios.defaults.withCredentials = true;

REQUEST HEADER

POST /auth/sign-in HTTP/1.1
Host: my-app.herokuapp.com
Connection: keep-alive
Content-Length: 55
Pragma: no-cache
Cache-Control: no-cache
Origin: https://my-app.firebaseapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3921.0 Safari/537.36
Content-Type: application/json;charset=UTF-8
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: https://my-app.firebaseapp.com/auth/sign-in
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7,nl;q=0.6,la;q=0.5

RESPONSE HEADER

HTTP/1.1 200 OK
Server: Cowboy
Connection: keep-alive
X-Dns-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
Access-Control-Allow-Origin: https://my-app.firebaseapp.com
Vary: Origin, Accept-Encoding
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: customCookie
Set-Cookie: customCookie=value; Domain=https://my-app.firebaseapp.com; Path=/; Expires=Sun, 17 Nov 2019 11:54:30 GMT; HttpOnly; Secure; SameSite=None
Content-Type: application/json; charset=utf-8
Content-Length: 200
Etag: W/"c8-qlzfwyZ+uJQMQIeJOQnFSQYPR6o"
Date: Sun, 20 Oct 2019 11:54:30 GMT
Via: 1.1 vegur

So, the cookie is correctly sent and received here:

Set-Cookie: customCookie=value; Domain=https://my-app.firebaseapp.com; Path=/; Expires=Sun, 17 Nov 2019 11:54:30 GMT; HttpOnly; Secure; SameSite=None

But when I check the tab: Google Dev Tools >> Application >> Cookies >> my-app...

=> There is no cookie stored and therefore the cookie is not sent on subsequent request...

Any idea/advice?

Thank you very much for your help,

Romain

Answer 1

I think you need to handle Access-Control .

you can do it by adding this code

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    next();
});

Also, I suppose that you are using Chrome as a browser, can you run chrome without security by doing this and then check if your cookies stored or not

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/Chrome dev session" --args --disable-web-security

Answer 2

I think I get it.

In Chrome (and maybe other navigator), cookies seems to be stored only in the domain address and the domain address, in my case, should be the server app (my-app.herokuapp.com), not the client one (my-app.firebaseapp.com).

In other words, I thought my cookie would be stored and visible in my client-app address but they are actually stored and visible on my domain address.

Now everything works...