Every request sent with fetch() has a different sessionId cookie, which prevents me from tracking the session across requests

I have a react front-end application running on localhost:3000, and a Django backend server running on 127.0.0.1:8000

I am sending the request from a function using fetch()
Using both widthCredentials and Access-Control-Allow-Credentials is probably overkill but I am trying anything at this point.

        const response = await fetch(url, {
            method: 'POST',
            mode: 'cors',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Credentials': 'true',
                'withCredentials': 'true',
 
            },
            body: JSON.stringify(data)
        })

In my Django backend I have installed django-cors-headers and set all settings correctly AFAIK.

Djang is not complaining about any requests so I believe my Django setup is correct.
For some reason the sessionId cookie in every request is different so I can’t use it to track a session across requests. Instead Django creates a new session for each request.

Django settings

INSTALLED_APPS = [
    ....
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
    "cache-control",
    "pragma",
    "access-control-allow-credentials",
    "withCredentials",
]


# use file to store sessions
SESSION_ENGINE = 'django.contrib.sessions.backends.file'
SESSION_FILE_PATH = "/path/to/dir"

SESSION_COOKIE_NAME = 'sessionid'
SESSION_COOKIE_DOMAIN = "localhost"
SESSION_COOKIE_SECURE = True  # if this is to TRUE cookies dont work propoerly, not sure why
# SESSION_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SAMESITE = 'None'

>Solution :

It looks like your issue might be due to incorrect settings for SESSION_COOKIE_DOMAIN and SESSION_COOKIE_PATH. Here are a few steps to fix this up:

1. SESSION_COOKIE_DOMAIN:

   • For local development, you should leave this setting blank or set it to None. Setting it to "localhost" is usually incorrect because cookies set for "localhost" might not be accepted by the browser.

2. SESSION_COOKIE_PATH:

   • This should be set to "/" unless your web application is hosted at a specific path.

3. Other Settings:

   • Ensure that 'django.contrib.sessions' is in your INSTALLED_APPS and 'django.contrib.sessions.middleware.SessionMiddleware' is in your MIDDLEWARE.

Here is the revised configuration for your Django settings:

Django Settings

INSTALLED_APPS = [
    ....
    'corsheaders',
    'django.contrib.sessions',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
    "cache-control",
    "pragma",
    "access-control-allow-credentials",
    "withCredentials",
]

SESSION_ENGINE = 'django.contrib.sessions.backends.file'
SESSION_FILE_PATH = "/path/to/dir"

SESSION_COOKIE_NAME = 'sessionid'
SESSION_COOKIE_DOMAIN = None  # For local development
SESSION_COOKIE_PATH = "/"
SESSION_COOKIE_SECURE = False  # Should be False for local development
SESSION_COOKIE_SAMESITE = 'None'