在开发环境 DRF SessionAuthentication + React 中被阻止 Set-Cookie

Question

我有一个非常具体的问题，但我没有在关于该主题的许多问题中找到它。

最初我的 Set-Cookie headers 被屏蔽了。我设法解决了这个问题，但 Cookie 仍然没有存储，我不知道为什么。

我有一个 DRF + React Web 应用程序，我最近将其从令牌身份验证更改为 Session 服务器端过期身份验证。在生产中这很好用，登录后我收到两个 Set-Cookies，一个 session id 和一个 csrftoken。但是，在我的开发环境中，Set-Cookie 被阻止为 This Set-Cookie was blocked because it had the 'SameSite=Lax' attribute but came from a cross-site response which was not the repsonse to a top-level navigation.。

我尝试将 SameSite 设置更改为 none，在这种情况下 Chrome 需要安全 cookie，我认为这在我的开发环境中是不可能的。
我尝试在 chrome://flags 中禁用 Cookies without SameSite must be secure。
CORS_ALLOWED_ORIGINS 中的清单 127.0.0.1 允许 Set-Cookie，但不知何故设置了旧 cookie。这不适用于本地主机。
虽然我认为这不相关，但这里的很多解决方案都提到将 {withCredentials: true} 添加到请求中，但这并不能解决我的问题，因为我确实收到了 Set-Cookie headers，他们只是被屏蔽了。
如果我在 127.0.0.1 上登录，我会收到 403，CSRF 缺失或不正确。它列在 CSRF_TRUSTED_ORIGINS 中，但我在本地主机上没有得到它。

Cookie/CORS相关Settings.py

# CSRF / CORS / Cookies
ALLOWED_HOSTS = ['*']
CORS_ALLOWED_ORIGINS = [
    'http://127.0.0.1:3000',
    'http://localhost:3000', 
]
CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000',
    'http://127.0.0.1:3000',
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CSRF_USE_SESSIONS = False
CSRF_COOKIE_HTTPONLY = False         # Not accessible by client (not important)
CSRF_COOKIE_AGE = 8 * 3600           # Expires after 8 hr
CSRF_COOKIE_SECURE = False           # Only HTTPS

SESSION_COOKIE_HTTPONLY = False      # Not accessible by client 
SESSION_COOKIE_AGE = 8 * 3600        # Expires after 8 hr
SESSION_COOKIE_SECURE = False        # Only HTTPS

Answer 1

最终我找到了解决方案，它包含两个部分：

通过将 'http://127.0.0.1:3000' 添加到 CORS_ALLOWED_ORIGINS，确保 Set-Cookie headers 未被阻止。
确保登录时浏览器中没有旧cookie，以便您可以使用标签{withCredentials: true}登录。 CSRF 检查将因 old/invalid 个 cookie 而失败。但是，如果将检查设置为 false，则不会存储新的 cookie。

在开发环境 DRF SessionAuthentication + React 中被阻止 Set-Cookie

Blocked Set-Cookie in development environment DRF SessionAuthentication + React

django

csrf

cors

django-rest-framework

reactjs