How to solve "X-Csrftoken HTTP header has incorrect length" error from React Native with Django API?

The program should make a POST Request to log out a React Native client (Android with Expo Go), ending it's session. The program stores both user's session id and CSRF token from Django response after login, with React Native asyncStorage. And when trying to make the logout request by sending both session id and CSRF token as headers, the program shows the title error.

Logout Request

const postRequestLogout = async () => {
    try {

      //getting both sessionid and csrftoken from asycStorage

      const sessionid_value = await AsyncStorage.getItem('sessionid')
      const csrftoken_value = await AsyncStorage.getItem('csrftoken')

      console.log("Session: ",sessionid_value)
      console.log("Csrf: ",csrftoken_value)

      //Here these values are passed to headers

      const requestOptions = {method:'POST',headers: {'Content-Type': 'application/json','Authorization':sessionid_value,'X-CSRFTOKEN':csrftoken_value}}
        
      await fetch(
        'http://myIP/user_account/api_logout_user_account/', requestOptions)
        .then(response => {
            response.json()
                .then(data => {
                    Alert.alert("Sucesss");
                    console.log(data)
                });
        })

    } catch(e) {
        console.log(e)
    }
}

Login request

const PostRequestLogin = () => {
    const email = "myemail"
    const password = "mypass"

    setSessionId = async (value) => {
        try {
          await AsyncStorage.setItem('sessionid', JSON.stringify(value))
        } catch(e) {
            console.log(e)
        }
    }

    setCsrfToken = async (value) => {
        try {
          await AsyncStorage.setItem('csrftoken', JSON.stringify(value))
        } catch(e) {
            console.log(e)
        }
    }

    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email:email,password:password})
    };

    const postRequestLogin = async () => {
        try {
            await fetch(
                'http://myIP/user_account/api_login_user_account/', requestOptions)
                .then(response => {
                    response.json()
                        .then(data => {
                            if(data.sessionid && data.csrftoken){
                                Alert.alert("Sucesss");
                                console.log(data);
                                setSessionId(data.sessionid)
                                setCsrfToken(data.csrftoken)
                            }
                            else{
                                Alert.alert("No SessionId or CSRF TOKEN Received!");
                                console.log("No SessionId or CSRF TOKEN Received!");
                            }

                        });
                })
        }
        catch (error) {
            console.error(error);
        }
    }

Example of how CSRF token pair value looks on the console:

"csrftoken": "IRFxHgM5LYbhPYNXWHqghBK7IETPnxDEx0TYp4loWKpxcj3DStLTLIhBmAl58VOw"

And this is a code part of how the Django API sends information to the client (after login):

request.session.save()
serializer_response = LoginUserAccountSerializer(data={'email': email,'password':password,'sessionid':request.session.session_key,'csrftoken':get_token(request)})
if serializer_response.is_valid():
    login(request, user)
    return Response(serializer_response.data,status=status.HTTP_202_ACCEPTED)

Вернуться на верх