為什么在發出跨域請求時會出現 403 被禁止 - 即使我的代碼正在設置 CRSF cookie

Question

我嘗試使用 axios 執行登錄 + 另一個 POST 請求，如果我使用相同的主機（即 localhost 到 localhost，或 127.0.0.1 到 127.0.0.1）似乎效果很好，但從 localhost -> 127.0.0.1 時卻不行或相反亦然。 請幫助我找出我的配置中缺少什么，

服務器設置：

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',
]

客戶端使用：

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

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

APIKit.get('/requests/')

登錄成功，但服務器發送新的 csrf 令牌，在 axios 中被忽略，如下圖所示，因此收到 403 Forbidden

登錄請求標頭

: 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

“請求”請求標頭

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

在我的情況下，SameSite=Lax cookie 似乎存在問題，導致客戶端沒有保存 cookies。

如果您將 cursor 放在警報圖標上，它實際上表示 Set-Cookie 因 SameSite=Lax 而被阻止； 讀了一些關於它的信息讓我明白了；

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

因此，添加以下設置似乎可以解決它：

SESSION_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True