如何使用HttpOnly Cookie Django-React对用户进行身份验证

Question

我试图了解我的Web应用程序的身份验证系统，但是我疯了。现在我真的不知道我在做什么，

无论如何，我正在开发Django-React Web App，并使用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 settings.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 为我解决了这个问题。