如何使用 HttpOnly Cookie 验证用户 Django-React

Question

我正在尝试了解我的网络应用程序的身份验证系统，但我快疯了。此时我真的不知道自己在做什么，

无论如何，我正在开发 Django-React Web 应用程序并使用 JWT 令牌进行身份验证。为了安全措施，我决定不在客户端存储 JWT 令牌，这就是我的困惑开始的地方。所以我发出 axios POST 请求从 React => 登录

//LOGIN USER
export const login = (username, password) => dispatch => {
    //Headers
    const config = {
        headers: {
            "Content-type": "application/json"
        }
    }

    //Request body
    const body = JSON.stringify({ username, password })

    axios.post("http://localhost:8000/auth/login/", body, config, {withCredentials: true})
        .then(res => {
            dispatch({
                type: LOGIN_SUCCESS,
                payload: res.data
            })
        }).catch(err => {
            console.log(err)
            dispatch({
                type: LOGIN_FAIL
            })
        })
}

和带有一些cookie的服务器响应=>

和 JSON 响应 =>

然后我想使用 access_token 进行身份验证，但由于它是 HttpOnly 我无法从客户端访问令牌。无论如何，通过一些研究，我发现我可以发送 csrf-token 进行身份验证（我可能是错的），所以我向受保护的端点发出了请求=>

import axios from 'axios'
axios.defaults.xsrfCookieName = "csrftoken"
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN" 
//ADD POST
export const addPost = (post) => dispatch => {
    
    const config = {
        headers: {
            "X-CSRFTOKEN": 'csrftoken'
        }
    }

    axios.post(`http://localhost:8000/api/v1/create/`, post, config, {withCredentials: true})
        .then(res => {
            dispatch({
                type: ADD_POST,
                payload: res.data
            })
        }).catch(err => console.log(err))
}

然而，在这个请求之后，我得到了401 Authentication Credentials not provided服务器的响应。除此之外我真的不知道还能做什么。

额外信息，

Django 设置.py

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES':[
       # 'rest_framework.authentication.TokenAuthentication',
         'rest_framework_simplejwt.authentication.JWTAuthentication',
       # 'dj_rest_auth.jwt_auth.JWTCookieAuthentication',
],
    'DEFAULT_PERMISSION_CLASSES': [
    'rest_framework.permissions.AllowAny'
]
}

SIMPLE_JWT = {
        'ROTATE_REFRESH_TOKENS': True,
}


CORS_ORIGIN_ALLOW_ALL = False

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8080/#'
)

REST_USE_JWT = True

JWT_AUTH_COOKIE = 'myHttpOnlyCookie'

JWT_AUTH_SECURE = True

JWT_AUTH_SAMESITE = 'Strict'

CSRF_COOKIE_NAME = "csrftoken"

CSRF_COOKIE_HTTPONLY = False

CSRF_COOKIE_SECURE = True

好吧，我需要从你们那里得到任何建议。

Answer 1

希望您已经解决了问题，但为了将来的参考，请不要127.0.0.1 为localhost我解决问题。