Django+；ReactJS。Httponly cookie未保存在React端的浏览器中。我也给了双方{withcredentials:true}_Reactjs_Django_Django Rest Framework_Axios_Jwt

Django+；ReactJS。Httponly cookie未保存在React端的浏览器中。我也给了双方{withcredentials:true}

reactjs django django-rest-framework jwt

Django+；ReactJS。Httponly cookie未保存在React端的浏览器中。我也给了双方{withcredentials:true},reactjs,django,django-rest-framework,axios,jwt,Reactjs,Django,Django Rest Framework,Axios,Jwt,我使用django rest_framework_simplejwt包生成JWT令牌，并将它们设置在带有Httponly标志的可浏览cookie中。在Django端，它工作得很好，但在react端，它并不工作得很好。我读了很多关于这个问题的答案，但它们还没有解决我的问题。请帮我理解我错在哪里 DJANGO侧视图.py from rest_framework_simplejwt.views import TokenObtainPairView from django.conf import

我使用django rest_framework_simplejwt包生成JWT令牌，并将它们设置在带有Httponly标志的可浏览cookie中。在Django端，它工作得很好，但在react端，它并不工作得很好。我读了很多关于这个问题的答案，但它们还没有解决我的问题。请帮我理解我错在哪里

DJANGO侧

视图.py

from rest_framework_simplejwt.views import TokenObtainPairView
from django.conf import settings

from rest_framework import status
from rest_framework_simplejwt.exceptions import TokenError,\
    InvalidToken
from rest_framework.response import Response

class MyTokenObtainPairView(TokenObtainPairView):
    
    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)

        try:
            serializer.is_valid(raise_exception=True)
        except TokenError as e:
            raise InvalidToken(e.args[0])
           
          # set access token in browser with Httponly cookie.
        res = Response(serializer.validated_data, status=status.HTTP_200_OK)
        access_token = serializer.validated_data['access']
        res.set_cookie("access_token", access_token, max_age=settings.SIMPLE_JWT.get('ACCESS_TOKEN_LIFETIME').total_seconds(),samesite='Lax',secure=False, httponly=True)
        
        return res

from rest_framework_simplejwt.authentication import JWTAuthentication    
from django.conf import settings

class CookieHandlerJWTAuthentication(JWTAuthentication):
    def authenticate(self, request):
        # If cookie contains access token, put it inside authorization header
        access_token = request.COOKIES.get('access_token')
        if(access_token):
            request.META['HTTP_AUTHORIZATION'] = '{header_type} {access_token}'.format(
                header_type=settings.SIMPLE_JWT['AUTH_HEADER_TYPES'][0], access_token=access_token)

        return super().authenticate(request)

from .views import MyTokenObtainPairView

urlpatterns = [
    ......
    path('auth/', include('djoser.urls')),
    # path('auth/', include('djoser.urls.jwt')),
    
    path('auth/api/token/', MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
]

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:8000'
)

authentication.py

from rest_framework_simplejwt.views import TokenObtainPairView
from django.conf import settings

from rest_framework import status
from rest_framework_simplejwt.exceptions import TokenError,\
    InvalidToken
from rest_framework.response import Response

class MyTokenObtainPairView(TokenObtainPairView):
    
    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)

        try:
            serializer.is_valid(raise_exception=True)
        except TokenError as e:
            raise InvalidToken(e.args[0])
           
          # set access token in browser with Httponly cookie.
        res = Response(serializer.validated_data, status=status.HTTP_200_OK)
        access_token = serializer.validated_data['access']
        res.set_cookie("access_token", access_token, max_age=settings.SIMPLE_JWT.get('ACCESS_TOKEN_LIFETIME').total_seconds(),samesite='Lax',secure=False, httponly=True)
        
        return res

from rest_framework_simplejwt.authentication import JWTAuthentication    
from django.conf import settings

class CookieHandlerJWTAuthentication(JWTAuthentication):
    def authenticate(self, request):
        # If cookie contains access token, put it inside authorization header
        access_token = request.COOKIES.get('access_token')
        if(access_token):
            request.META['HTTP_AUTHORIZATION'] = '{header_type} {access_token}'.format(
                header_type=settings.SIMPLE_JWT['AUTH_HEADER_TYPES'][0], access_token=access_token)

        return super().authenticate(request)

from .views import MyTokenObtainPairView

urlpatterns = [
    ......
    path('auth/', include('djoser.urls')),
    # path('auth/', include('djoser.urls.jwt')),
    
    path('auth/api/token/', MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
]

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:8000'
)

url.py

from rest_framework_simplejwt.views import TokenObtainPairView
from django.conf import settings

from rest_framework import status
from rest_framework_simplejwt.exceptions import TokenError,\
    InvalidToken
from rest_framework.response import Response

class MyTokenObtainPairView(TokenObtainPairView):
    
    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)

        try:
            serializer.is_valid(raise_exception=True)
        except TokenError as e:
            raise InvalidToken(e.args[0])
           
          # set access token in browser with Httponly cookie.
        res = Response(serializer.validated_data, status=status.HTTP_200_OK)
        access_token = serializer.validated_data['access']
        res.set_cookie("access_token", access_token, max_age=settings.SIMPLE_JWT.get('ACCESS_TOKEN_LIFETIME').total_seconds(),samesite='Lax',secure=False, httponly=True)
        
        return res

from rest_framework_simplejwt.authentication import JWTAuthentication    
from django.conf import settings

class CookieHandlerJWTAuthentication(JWTAuthentication):
    def authenticate(self, request):
        # If cookie contains access token, put it inside authorization header
        access_token = request.COOKIES.get('access_token')
        if(access_token):
            request.META['HTTP_AUTHORIZATION'] = '{header_type} {access_token}'.format(
                header_type=settings.SIMPLE_JWT['AUTH_HEADER_TYPES'][0], access_token=access_token)

        return super().authenticate(request)

from .views import MyTokenObtainPairView

urlpatterns = [
    ......
    path('auth/', include('djoser.urls')),
    # path('auth/', include('djoser.urls.jwt')),
    
    path('auth/api/token/', MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
]

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:8000'
)

设置.py

from rest_framework_simplejwt.views import TokenObtainPairView
from django.conf import settings

from rest_framework import status
from rest_framework_simplejwt.exceptions import TokenError,\
    InvalidToken
from rest_framework.response import Response

class MyTokenObtainPairView(TokenObtainPairView):
    
    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)

        try:
            serializer.is_valid(raise_exception=True)
        except TokenError as e:
            raise InvalidToken(e.args[0])
           
          # set access token in browser with Httponly cookie.
        res = Response(serializer.validated_data, status=status.HTTP_200_OK)
        access_token = serializer.validated_data['access']
        res.set_cookie("access_token", access_token, max_age=settings.SIMPLE_JWT.get('ACCESS_TOKEN_LIFETIME').total_seconds(),samesite='Lax',secure=False, httponly=True)
        
        return res

from rest_framework_simplejwt.authentication import JWTAuthentication    
from django.conf import settings

class CookieHandlerJWTAuthentication(JWTAuthentication):
    def authenticate(self, request):
        # If cookie contains access token, put it inside authorization header
        access_token = request.COOKIES.get('access_token')
        if(access_token):
            request.META['HTTP_AUTHORIZATION'] = '{header_type} {access_token}'.format(
                header_type=settings.SIMPLE_JWT['AUTH_HEADER_TYPES'][0], access_token=access_token)

        return super().authenticate(request)

from .views import MyTokenObtainPairView

urlpatterns = [
    ......
    path('auth/', include('djoser.urls')),
    # path('auth/', include('djoser.urls.jwt')),
    
    path('auth/api/token/', MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
]

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:8000'
)

工作完美（仅使用Httponly在cookie中设置令牌）：

js侧反应

Login.js

axios.defaults.withCredentials = true
const Login = () => {

const [ivalue, setValue] = useState({});
const { state, dispatch } = useContext(Authcontext);
.......

const loginClick = (e) => {
    e.preventDefault();
    setLoader(true);

    axios.post('http://127.0.0.1:8000/auth/api/token/', {
        username: ivalue.username,
        password: ivalue.password,
    })
        .then((res) => {
            setValue({ password: "" });

            dispatch({
                type: LOGIN_SUCCESS,
            });

            setLoader(false);
 
            history.push("/my_profile");
        })
        .catch((err) => {
            setLoader(false);
            setOpen({ act: true, msg: "error" });

            dispatch({
                type: LOGIN_ERROR,
            });
            setError(err.response.data);
        });
};
.........
};

axios.defaults.withCredentials = true

const MyProfile = () => {

    const history = useHistory();
    const { state, dispatch } = useContext(Authcontext);

    useEffect(() => {
        const auth_check = () => {
                axios.get('http://127.0.0.1:8000/auth/users/me/')
                    .then((res) => {
                        dispatch({
                            type: AFTER_LOGIN,
                            payload: res.data
                        });
                    })
                    .catch((err) => {
                        history.push('/login')
                    });
                    };
        auth_check();
    }, []);
}
.......

Myprofile.js

axios.defaults.withCredentials = true
const Login = () => {

const [ivalue, setValue] = useState({});
const { state, dispatch } = useContext(Authcontext);
.......

const loginClick = (e) => {
    e.preventDefault();
    setLoader(true);

    axios.post('http://127.0.0.1:8000/auth/api/token/', {
        username: ivalue.username,
        password: ivalue.password,
    })
        .then((res) => {
            setValue({ password: "" });

            dispatch({
                type: LOGIN_SUCCESS,
            });

            setLoader(false);
 
            history.push("/my_profile");
        })
        .catch((err) => {
            setLoader(false);
            setOpen({ act: true, msg: "error" });

            dispatch({
                type: LOGIN_ERROR,
            });
            setError(err.response.data);
        });
};
.........
};

axios.defaults.withCredentials = true

const MyProfile = () => {

    const history = useHistory();
    const { state, dispatch } = useContext(Authcontext);

    useEffect(() => {
        const auth_check = () => {
                axios.get('http://127.0.0.1:8000/auth/users/me/')
                    .then((res) => {
                        dispatch({
                            type: AFTER_LOGIN,
                            payload: res.data
                        });
                    })
                    .catch((err) => {
                        history.push('/login')
                    });
                    };
        auth_check();
    }, []);
}
.......

JWT响应（浏览器中未设置cookie）。

未经授权的错误

我将后端和前端设置在同一IP下。我的后端是

本地主机：8000

前端是

本地主机：3000

不同的端口使用相同的Ip

当它投入生产时，您可以拥有任何域。

您好，我也面临同样的问题。我正在React中获取（并提供）

localhost

，但问题仍然存在。@CoronelV在这里查看您的问题答案：