Why isn't the express session cookie being stored on the browser's cookie storage on production, but it works on localhost?? (express + react)

Question

I created a test react app which is deployed at vercel and the server is at render.com. To solve cross-site cookie problems I set the same domain on both (app.mydomain.online for the app, and api.mydomain.online for the API). Now, when i look at the cookie in the header, no errors are showing up. However, The cookie still not getting stored.

server is created via npm init. react is created via npm create-react-app.

this is my sample code.

server

const express = require("express");
const cors = require("cors");
const session = require('express-session');
const app = express();
require('dotenv').config();

const PORT = process.env.PORT;

app.use(express.json());
app.use(cors({
    origin: 'https://app.myDomain.online',
    methods: ["POST", "PUT", "GET", "OPTIONS", "HEAD"],
    credentials: true
}));

const oneDay = 1000 * 60 * 60 * 24;
app.set('trust proxy', 1) // trust first proxy
app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true, sameSite: 'none' }
}));

app.get('/createSession', (req, res) => {
    req.session.user = 'user';
    res.send('new session is created');
});

app.get('/', (req, res) => {
    res.send('get sess')
});

app.get('/getSession', (req, res) => {
    if(req.session.user){
        res.send('active');
    }else{
        res.send('not active');
    }
});

app.listen(PORT, () => {
    console.log(`The server is running on port ${PORT}`);
});

react

import React from 'react'
import { useEffect } from 'react';
import Axios from 'axios';

function Test() {
    
    useEffect(() => {
        Axios.get(' https://api.myDomain.online/createSession',
                  { withCredentials: true }
        );
    }, []);
    
    

    return (
        <div>Test</div>
    )
}

export default Test;

Answer 1

I actually found a solution a few days ago, It turned out that the cookie was being blocked was because its domain was too similar to the server's. I was able to fix the it by removing the api from the cookie's domain as cookie: { domain: '.domain.com' }. This is my new code bellow.

const oneDay = 1000 * 60 * 60 * 24;
const APP_SESSION = session({
    secret: 'secrete',
    resave: false,
    saveUninitialized: true,
    name: 'session',
    cookie: {
        secure: true,
        sameSite: 'none'
        maxAge: oneDay,
        domain: '.domain.com'
    }
});