为什么在发出跨域请求时会出现 403 被禁止 - 即使我的代码正在设置 CRSF cookie

Question

I try to perform login + another POST request with axios and it seems that it works well if i use the same host ( ie localhost to localhost, or 127.0.0.1 to 127.0.0.1) but not when going from localhost -> 127.0.0.1 or vice versa. Please assist me finding what am I missing in my configuration,

server settings:

ALLOWED_HOSTS = []

REMOVE_SLASH = True

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = [
"http://localhost:8080",
"http://127.0.0.1:8080",
"http://localhost:19006",
"http://127.0.0.1:19006"
]

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

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

client usage:

let APIKit = axios.create({
    withCredentials: true,
    baseURL: 'http://127.0.0.1:8000',
    timeout: 10000,
});

APIKit.post("/user?action=login", {...})

APIKit.get('/requests/')

Login succeeds but server sends new csrf token, which is ignored in axios as you can see in the following pictures, and thus receiving 403 Forbidden

Login request headers

: true
Access-Control-Allow-Origin: http://localhost:19006
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Set-Cookie:  csrftoken=Huur0KQgFMtokszTOUa1gGaWJNODn8blYvjfEO2UGnuyN75hWy1cZLVTaND2ypZ9; expires=Thu, 31 Mar 2022 08:03:39 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Set-Cookie:  sessionid=r6alaupw0484mreqt8r4vlqe17hxdjsc; expires=Thu, 15 Apr 2021 08:03:39 GMT; HttpOnly; Max-Age=1209600; Path=/; SameSite=Lax
POST /user?action=login HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Content-Length: 49
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
Accept: application/json, text/plain, */*
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:19006
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty

"requests" request headers

GET /requests/ HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
Accept: application/json, text/plain, */*
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36
Origin: http://localhost:19006
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:19006/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,he;q=0.8,de;q=0.7

Answer 1

it seems that in my case there was a problem with a SameSite=Lax cookie, that caused the client not saving cookies.

If you put the cursor on the alert icon, it actually says that Set-Cookie was blocked due to the SameSite=Lax; Reading a bit about it led me to;

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite https://docs.djangoproject.com/en/3.1/ref/settings/

So, adding the following settings seems to solve it:

SESSION_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True