【问题标题】：Why do I get 403 forbidden when making a cross-origin request — even though my code is setting a CRSF cookie为什么我在发出跨域请求时会收到 403 禁止 - 即使我的代码设置了 CRSF cookie
【发布时间】：2021-06-28 05:30:53
【问题描述】：

我尝试使用 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

【问题讨论】：

标签： django cookies axios csrf samesite

【解决方案1】：

在我的情况下，SameSite=Lax cookie 似乎存在问题，导致客户端不保存 cookie。

如果您将光标放在警报图标上，它实际上表示 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

【讨论】：

developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/…