'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.
Solution 1:[1]
If you set SameSite to None, Chrome will not sending cookies at all unless the Secure flag is set, and therefore only over HTTPS. The exception is for same site requests.
This will explain why your session and csrftoken cookies get sent from 192.168.1.50 but not 127.0.0.1. I don't know how your hello=world cookie was set. If that also had SameSite=None, then it would not get sent either.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | mbakereth |
