开发环境 DRF SessionAuthentication + React 中的 Blocked Set-Cookie答案

【问题标题】：Blocked Set-Cookie in development environment DRF SessionAuthentication + React开发环境 DRF SessionAuthentication + React 中的 Blocked Set-Cookie
【发布时间】：2021-04-11 04:49:59
【问题描述】：

我有一个非常具体的问题，我在有关此主题的许多问题中都没有找到。

最初我的 Set-Cookie 标头被阻止。我设法解决了这个问题，但 Cookie 仍未存储，我不知道为什么。

我有一个 DRF + React Web 应用程序，我最近将其从令牌身份验证更改为用于服务器端到期的会话身份验证。在生产中这很好用，登录后我收到两个 Set-Cookie、一个会话 ID 和一个 csrftoken。但是，在我的开发环境中，Set-Cookies 被阻止为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 设置更改为无，在这种情况下 Chrome 需要安全 cookie，我认为这在我的开发环境中是不可能的。
我尝试在chrome://flags 中禁用Cookies without SameSite must be secure。
CORS_ALLOWED_ORIGINS 中的列表 127.0.0.1 允许 Set-Cookie，但不知何故设置了旧 cookie。这不适用于 localhost。
虽然我认为这无关紧要，但这里的许多解决方案都提到将 {withCredentials: true} 添加到请求中，但这并不能解决我的问题，因为我确实收到了 Set-Cookie 标头，它们只是被阻止了.
如果我在 127.0.0.1 上登录，我会收到一个 403，其中 CSRF 缺失或不正确。它列在 CSRF_TRUSTED_ORIGINS 中，我没有在 localhost 上得到它。

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

【问题讨论】：

标签： reactjs django django-rest-framework cors csrf

【解决方案1】：

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

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

【讨论】：