axios give me error (POST /api/v1/users/token/refresh/ HTTP/1.1" 401 65) , How solve it?

Question

in windows 10 , i'm using react-router-dom 5.2.0 and react-redux 7.2.5 and react 17.0.2. and axios 0.21.4 and WebStorm 2023.1.3 IDE.

Consider 1 - axiosInstanse.js:

import jwt_decode from 'jwt-decode';
import dayjs from 'dayjs';
import axios from 'axios';
import {updateAccessToken} from '../actions/userActions';
const baseURL = 'http://127.0.0.1:8000';

const axiosInstance = (userInfo , dispatch) => {
    const instance = axios.create({
        'mode': 'cors',
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            Authorization:`Bearer ${userInfo?.access}`,
        }
    });
    instance.interceptors.request.use(async req=> {
        try {
        const user = jwt_decode(userInfo.access);
        const isExpired = dayjs.unix(user.exp).diff(dayjs()) < 5000;
        if (!(isExpired)) {
            return req
        }

            const response = await axios.post(
                '/api/v1/users/token/refresh/' , {refresh:userInfo.refresh},
            );


        dispatch(updateAccessToken(response.data))
        req.headers.Authorization = `Bearer ${response.data.access}`;
        return req;
        } catch (error) {
           console.log(error)
        }
    });
    return instance
}

export default axiosInstance;

Consider 2 - userActions.js:

export const userFurtherInformationAction = (image, gender) => async (dispatch, getState) => {
    try {
        dispatch({ //USER FURTHER INFORMATION REQUEST
            type: USER_FURTHER_INFORMATION_REQUEST,

        });
        const {userLogin: {userInfo}} = getState();
        const formData = new FormData();
        const image_url = URL.createObjectURL(image)

        formData.append('userPicture', image);
        formData.append('sex', gender);
        // var object = {};
        // formData.forEach(function(value, key){
        //     object[key] = value;
        // });

        // var json = JSON.stringify(formData);
        // const config = {
        //     'mode': 'cors', headers: { //
        //         'Content-type': 'multipart/form-data', 'Authorization': `Bearer ${userInfo.token}`
        //     }
        // }
        const authRequestAxios = axiosInstance(userInfo,dispatch);
        const {data} = await authRequestAxios.post('/api/v1/users/complete_user_further_info/', formData);

        dispatch({ //USER FURTHER INFORMATION SUCCESS
            type: USER_FURTHER_INFORMATION_SUCCESS, payload: data,

        });
        localStorage.setItem('userInfo', JSON.stringify(data));
    } catch (error) {
        dispatch({ // USER FURTHER INFORMATION FAILED
            type: USER_FURTHER_INFORMATION_FAILED,
            payload: error.response && error.response.data.detail ? error.response.data.detail : error.message,
        });
    }
}

i expect to upload picutre --> but in my frontend -> reactjs -> axios raise error [11/Nov/2023 12:55:36] "POST /api/v1/users/token/refresh/ HTTP/1.1" 401 65

this error raise after making axiosInstance arrow function ... i guess error is at file --> axiosInstance.js

Chukwujiobi Canon · Accepted Answer · 2023-11-11 11:07:21Z

-1

"POST /api/v1/users/token/refresh/ HTTP/1.1" 401 65

Is a Http Request Authorization error which the standard states that:

The 401 (Unauthorized) status code indicates that the request has not been applied because it lacks valid authentication credentials for the target resource. The server generating a 401 response MUST send a WWW-Authenticate header field containing at least one challenge applicable to the target resource.

If the request included authentication credentials, then the 401 response indicates that authorization has been refused for those credentials. The user agent MAY repeat the request with a new or replaced Authorization header field (Section 4.2). If the 401 response contains the same challenge as the prior response, and the user agent has already attempted authentication at least once, then the user agent SHOULD present the enclosed representation to the user, since it usually contains relevant diagnostic information.

So check that this Authorization header actually authorizes your request:

Authorization: `Bearer ${userInfo?.access}`

edited Nov 11, 2023 at 11:07

answered Nov 11, 2023 at 11:01

Chukwujiobi Canon

4,2192 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

saman barjawand Over a year ago

this answer is true but does not solve error , only direct me to next question ... anyway , thanks -> (Chuckwuijobi Canon) ... i should ask questions with more details.

Chukwujiobi Canon Over a year ago

I would love to help

Collectives™ on Stack Overflow

axios give me error (POST /api/v1/users/token/refresh/ HTTP/1.1" 401 65) , How solve it?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related