Theo's Typesafe Cult•3y ago

can't set a cookie in my browser

this is not what I intended to do, I want to work with sessions and passportjs. but it turns out that the express-session can't set a cookie to my browser. that's why I tried this:

const express = require('express');
const app = express();
const cookie = require('cookie-parser');

app.use(cookie());

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

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

app.post('/login', (req, res) => {
    var cookie = req.cookies.cookieName;
    if (!cookie) {
        var randomNumber = Math.random().toString();
        randomNumber = randomNumber.substring(2, randomNumber.length);
        res.cookie('cookie', randomNumber, { maxAge: 900000, httpOnly: false });
        return res.json({ cookie, init: true });
    }

    return res.json({ cookie, init: false });
});

app.listen(2000, () => {
    console.log('listening from testCookie.js');
});

const express = require('express');
const app = express();
const cookie = require('cookie-parser');

app.use(cookie());

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

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

app.post('/login', (req, res) => {
    var cookie = req.cookies.cookieName;
    if (!cookie) {
        var randomNumber = Math.random().toString();
        randomNumber = randomNumber.substring(2, randomNumber.length);
        res.cookie('cookie', randomNumber, { maxAge: 900000, httpOnly: false });
        return res.json({ cookie, init: true });
    }

    return res.json({ cookie, init: false });
});

app.listen(2000, () => {
    console.log('listening from testCookie.js');
});

but still doesn't work I get this header in my response: Set-Cookie: cookie=7400542671495325; Max-Age=900; Path=/; Expires=Sat, 24 Sep 2022 13:32:53 GMT but that cookie is not set in my browser

1 Reply

venego•3y ago

oh I got it fixed, it not obvious at all from a web dev perspective. I hate this. but here is the solution if someone has the same the problem: it depends on the tools you use to communicated between front and back, but here is mine.

//FRONT-END
fetch(url, {...otheroptions, credentials: 'include'})

//BACK-END
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:3000');// you won't need this if you're using CORS middleware
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    next();
});

//FRONT-END
fetch(url, {...otheroptions, credentials: 'include'})

//BACK-END
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:3000');// you won't need this if you're using CORS middleware
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    next();
});

also, I just found this on MDN

Unless fetch() is called with the credentials option set to include, fetch(): won't send cookies in cross-origin requests won't set any cookies sent back in cross-origin responses

nobody mentions this in articles and youtube videos.

Gaming

Programming

can't set a cookie in my browser