Why fetch does not include credentials everytime with option {credentials: "include"}?

I have been trying to fetch data from my djangorestframework api verifying through cookies. Before reaching to the main problem,

  • My computer IP on LAN: 192.168.1.50
  • Running localhost at port 80: 127.0.0.1
  • Running django at port 8000: 192.168.1.50:8000 - (tried vice versa as well: 127.0.0.1:8000)

Now, assuming my django is running on 192.168.1.50:8000, I figured out that if I send fetch request to djangorestframework from 192.168.1.50 the cookies are attached with the request.

Django's settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    "corsheaders",

    'users',
]


MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CSRF_COOKIE_SAMESITE = None
SESSION_COOKIE_SAMESITE = None
CSRF_COOKIE_HTTPONLY = True
SESSION_COOKIE_HTTPONLY = True

CORS_ALLOWED_ORIGINS = [
    "http://192.168.1.50",
    "http://127.0.0.1",
]

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

Fetch method from JS,

fetch("http://192.168.1.50:8000/user/auth/", {
    method: "GET",
    credentials: "include",
    headers: {
        'Content-Type': 'application/json',
    },
}).then(r => {
    console.log(r.json());
})

Sending request from 192.168.1.50,

From 192.168.1.50's (from chrome browser),

Response Header:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://192.168.1.50
Allow: OPTIONS, GET
Content-Length: 5
Content-Type: application/json
Cross-Origin-Opener-Policy: same-origin
Date: Wed, 15 Dec 2021 #:#:# GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.8.10
Vary: Accept, Cookie, Origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

Request Header:

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Type: application/json
Cookie: hello=world; csrftoken=value; sessionid=value  # Cookies are passed
DNT: 1
Host: 192.168.1.50:8000
Origin: http://192.168.1.50
Referer: http://192.168.1.50/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36

Now same request from http://127.0.0.1,

Response Header: - (unchanged)

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://127.0.0.1
Allow: OPTIONS, GET
Content-Length: 5
Content-Type: application/json
Cross-Origin-Opener-Policy: same-origin
Date: Wed, 15 Dec 2021 #:#:# GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.8.10
Vary: Accept, Cookie, Origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

Request Header: - (changed)

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Type: application/json  # No cookies
DNT: 1
Host: 192.168.1.50:8000
Origin: http://127.0.0.1
Referer: http://127.0.0.1/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36

Please tell me what am I doing wrong and why is this happening?

Thank you.

Back to Top