reactjs 我的Django + React认证应用程序中的SameSite错误

00jrzges  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(102)

我的Django + React认证应用中出现SameSite错误

Here's the image of the error
我有一个简单的React + Django身份验证应用程序,我只是为了测试而部署。使用Django Rest Framework但是,当我点击“登录”时,我遇到了这个错误。基本上,由于这个错误,服务器无法向客户端发送/设置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

简而言之,当我向服务器发送'/login/' POST请求时,它使用set_cookie()在客户端设置cookie。它在开发环境中运行良好,但在生产环境中却会变得一团糟。
客户端Github代码:https://github.com/MrGuardianGo/React-Django-Authentication-Client
服务器Github代码:https://github.com/MrGuardianGo/React-Django-Authentication-Server
帮助将非常感激。谢谢大家!

6rqinv9w

6rqinv9w1#

为了在Django和React中纠正相同的站点错误,如果前端和后端在不同的子域上,则必须为CROSS DOMAIN和CORS配置cookie,例如:www.onrender.com、my-frontend.onrender.com和my-backend.onrender.com

在设置中配置cookie

在www.example.com中settings.py设置以下内容:

SESSION_COOKIE_DOMAIN = '.onrender.com'
SESSION_COOKIE_SECURE = True
SESSION_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = 'None'

SESSION_COOKIE_DOMAIN允许不同的可能域:www.onrender.com、api.onrender.com和my-backend.onrender.com

配置CORS

你可以使用django-cors-headers来管理CORS

1安装django-cors-headers

pip install django-cors-headers

2在settings.py:

2.1将“corsheaders”添加到已安装的应用程序

INSTALLED_APPS = [
    ...,
    "corsheaders",
    ...,
]

2.2将“corsheaders.middleware.CorsMiddleware”添加到中间件:

MIDDLEWARE = [
    ...,
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    ...,
]

2.3配置允许的原点:

CORS_ALLOWED_ORIGINS = [
    "https://www.onrender.com",
    "https://django-auth-server.onrender.com",
    "https://my-frontend.onrender.com",
    "http://my-frontend.onrender.com",
    ...
]

或者您可以配置一个正则表达式

CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https://\w+\.onrender\.com$",
    r"^http://\w+\.onrender\.com$",
]

更多information about origin,同源基于**“scheme(协议),主机名(域),端口”**(协议://域:端口)。遵循此规则,这些URL是不同的:

更多文档:

相关问题