Fetch with cookie not working even with `credentials: 'include'`
I wrote an example for your.
You don't need to setup "none" for sameSite attribute.
{ saveUninitialized: false, resave: false, secret: 'very secret 12345', cookie: { secure: false, }}Frontend Server
// server.jsconst express = require('express');const app = express();app.use(express.static("./public"));app.listen(5001);<!-- index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <script> fetch('http://localhost:4001/test', { method: "POST", credentials: "include" }).then(response => { return response.json() }).then(json => { alert('Received: ' + JSON.stringify(json)); }) </script></body></html>Backend Server
// other-server.jsconst express = require('express');const app = express();const session = require('express-session')var sess = { saveUninitialized: false, resave: false, secret: 'very secret 12345', cookie: { secure: false, }}const bodyParser = require('body-parser');app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: true}));app.use(session(sess))app.use((req, res, next) => { res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Accept, Content-Type") res.setHeader("Access-Control-Allow-Origin", "http://localhost:5001") res.setHeader("Access-Control-Allow-Credentials", true) res.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH") next();})app.post('/test', (req, res) => { console.log(req.sessionID); req.session.a = "hi" res.json({a: 1})})app.listen(4001, () => { console.log('start');});
UPDATE
The solution below worked when I was navigating on the browser to http://127.0.0.1:5501/index.html'. But if you navigate to localhost instead of 127.0.0.1 Jack Yu's answer works.
I needed to add options in the `cors` call `{ credentials: true, origin: 'http://localhost:5501' }`. As well as as options on the cookie `{ secure: false, sameSite: 'none'}`. As well as set the `res.header`s.
const express = require('express');const session = require('express-session');const app = express();const cors = require('cors');app.use( cors({ credentials: true, origin: 'http://localhost:5501', }));app.use( session({ saveUninitialized: false, resave: false, secret: 'very secret 12345', cookie: { secure: false, sameSite: 'none', }, }));app.use(async (req, res, next) => { res.header('Access-Control-Allow-Credentials', true); res.header( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, authorization' ); res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE,PUT,OPTIONS'); res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5501'); try { req.session.visits = req.session.visits ? req.session.visits + 1 : 1; console.log('req.session.visits: ', req.session.visits); return next(); } catch (err) { return next(err); }});app.get('/sayhi', (req, res, next) => { res.send('hey');});app.listen(4001).on('listening', () => { console.log('info', `HTTP server listening on port 4001`);});This works on firefox. But it still didn't work on chrome because Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. Mine is set to secure: false because I am not sending over HTTPS for development. So I followed these instructions:
You can completely disable this feature by going to "chrome://flags" and disabling "Cookies without SameSite must be secure". However, this will disable it for all sites, so it will be less secure when you aren't developing too.
But it concerns me that there isn't a better solution. I don't want to disable "Cookies without SameSite must be secure" for all sites if there's a security reason I shouldn't.