Django+React认证应用出现SameSite Cookie错误求助

我部署了一个测试用的React+Django认证应用，基于Django Rest Framework。点击“登录”时触发SameSite错误，导致服务器无法向客户端发送/设置Cookie。该功能在开发环境正常，但生产环境异常。

Django视图代码 #

class Login(APIView):
 def post(self, request):
        email = request.data['email']
        password = request.data['password']

        user = User.objects.filter(email=email).first()

        if user is None:
         raise exceptions.AuthenticationFailed('Invalid credentials')
        
        if not user.check_password(password):
         raise exceptions.AuthenticationFailed('Invalid credentials')
        
        refresh_token = create_refresh_token(user.id)
        access_token = create_access_token(user.id)

        UserToken.objects.create(
         user_id=user.id,
         token=refresh_token,
         expired_at=datetime.datetime.utcnow() + datetime.timedelta(days=365)
        )

        response = Response()

        response.set_cookie(key='refresh_token', value=refresh_token, httponly=True)
        response.set_cookie(key='access_token', value=access_token, httponly=True)
        response.data = UserSerializer(user).data
        return response

客户端代码仓库：React-Django-Authentication-Client
服务端代码仓库：React-Django-Authentication-Server

问题分析与修复方案 #

SameSite错误源于现代浏览器的Cookie安全策略，跨域场景下生产环境需严格配置Cookie属性，具体修复步骤如下：

1. 配置Django全局Cookie参数
   在settings.py中添加或修改以下配置：

SESSION_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = True

2. 显式设置Cookie的SameSite和Secure属性
   修改视图中set_cookie调用，补充必要参数：

response.set_cookie(
    key='refresh_token',
    value=refresh_token,
    httponly=True,
    samesite='None',
    secure=True
)
response.set_cookie(
    key='access_token',
    value=access_token,
    httponly=True,
    samesite='None',
    secure=True
)

3. 确保生产环境使用HTTPS
   SameSite=None必须配合Secure属性使用，而Secure要求Cookie仅通过HTTPS传输，因此生产环境必须部署HTTPS服务。

4. 完善跨域CORS配置
   在settings.py中配置允许客户端域名访问并支持携带Cookie：

CORS_ALLOWED_ORIGINS = [
    "https://你的客户端实际域名",
]
CORS_ALLOW_CREDENTIALS = True

内容的提问来源于stack exchange，提问作者Sai Dongargaonkar