Как исправить 401 (Unauthorized)?

[Ste11]

Здравствуйте, сделал jwt авторизацию и регистрацию. Но при проверки авторизированный ли пользователь выдаёт 401 Unauthorized отправлял через axios запрос на получение refresh токена(react/redux)
Вот action проверки на авторизацию

export const checkAuth = () => {

    try {
        return async dispatch => {
            const response = await axios.get(`http://localhost:5000/api/refresh`, {withCredentials: true})

            //console.log(response)

            dispatch({
                type: SET_USER,
                payload: response.data
            })

        }
    } catch (e) {
        console.log(e.response?.data?.message);
    }


}

вот reducer

import {LOGOUT, SET_USER} from "../types";

const initialState = {
    currentUser: {},
    isAuth: false
}

export const authReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_USER:
            localStorage.setItem('token', action.payload.accessToken);
            return {
                ...state,
                currentUser: action.payload,
                isAuth: true
            }
        case LOGOUT:
            localStorage.removeItem('token')
            return {
                ...state,
                currentUser: {},
                isAuth: false
            }
        default:
            return state
    }
}

export const logout = () => ({type: LOGOUT})

Вот компонент app

import './App.css';
import {Route, Routes} from "react-router-dom";
import LoginForm from "./component/LoginForm";
import {useDispatch, useSelector} from "react-redux";
import RegisterForm from "./component/RegisterForm";
import {useEffect} from "react";
import {checkAuth} from "./redux/action";

function App() {
    const users = useSelector(state => {
        const {authReducer} = state
        return authReducer
    })

    const dispatch = useDispatch()

    //console.log(users)

    useEffect(() => {

        checkAuth() // здесь делал и dispatch()
    }, [])


    if (!users.isAuth) {
        return (<div>
            <Routes>
                <Route path="/registration" element={<RegisterForm/>}/>
                <Route path="/login" element={<LoginForm/>}/>
            </Routes>
        </div>)
    }

    console.log(users.currentUser)

    return (
        <div className="App">
            {users.isAuth ? users.currentUser.rows.map(data => <div key={data.id}>{data.email}</div>) : 'авторизуйтесь'}
        </div>
    );
}

export default App;

Вот настройки axios, но я пробовал и через fetch() результат тот же (401)

import axios from "axios";

export const API_URL = `http://localhost:5000/api`

const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})

$api.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    return config;
})

$api.interceptors.response.use((config) => {
    return config;
},async (error) => {
    const originalRequest = error.config;
    if (error.response.status == 401 && error.config && !error.config._isRetry) {
        originalRequest._isRetry = true;
        try {
            const response = await axios.get(`${API_URL}/refresh`, {withCredentials: true})
            localStorage.setItem('token', response.data.accessToken);
            return $api.request(originalRequest);
        } catch (e) {
            console.log('НЕ АВТОРИЗОВАН')
        }
    }
    throw error;
})

export default $api;

На сервере установил cors вызываю так

app.use(cors()) // Use this after the variable declaration / пробовал такие настройки, не помогло  {credentials: true, origin: 'http://localhost:3000'}

Пробовал на сервере(node js/express) сделать так

app.options('*', cors())

Почему то вылазит 401 ошибка, хотя в postman все работает!
Почему уже не знаю!???

[Килобайт]

В коде

action

проверки на авторизацию не указан заголовок

`Authorization`

с токеном доступа. Необходимо добавить этот заголовок к запросу. Для этого можно использовать интерсептор в настройках

axios

.

Также, в коде компонента

`App`

вызов функции

`checkAuth`

не является диспатчем. Необходимо добавить его перед вызовом

`checkAuth`

.

Также, в настройках

axios

в интерсепторе ответа необходимо изменить

`axios`

на

`$api`

.

Исправленный код:

export const checkAuth = () => {
  try {
    return async dispatch => {
      const response = await axios.get(`http://localhost:5000/api/refresh`, {withCredentials:true, headers: {Authorization: `Bearer ${localStorage.getItem('token')}`}});
      dispatch({
        type: SET_USER,
        payload: response.data
      });
    }
  } catch (e) {
    console.log(e.response?.data?.message);
  }
}

function App() {
  const users = useSelector(state => {
    const {authReducer} = state
    return authReducer
  })

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(checkAuth())
  }, [dispatch])

  if (!users.isAuth) {
    return (
      <div>
        <Routes>
          <Route path="/registration" element={<RegisterForm/>}/>
          <Route path="/login" element={<LoginForm/>}/>
        </Routes>
      </div>
    )
  }

  console.log(users.currentUser)

  return (
    <div className="App">
      {users.isAuth ? users.currentUser.rows.map(data => <div key={data.id}>{data.email}</div>) : 'авторизуйтесь'}
    </div>
  );
}

$api.interceptors.response.use((config) => {
  return config;
}, async (error) => {
  const originalRequest = error.config;
  if (error.response.status == 401 && error.config && !error.config._isRetry) {
    originalRequest._isRetry = true;
    try {
      const response = await $api.get(`${API_URL}/refresh`, {withCredentials: true, headers: {Authorization: `Bearer ${localStorage.getItem('token')}`}})
      localStorage.setItem('token', response.data.accessToken);
      return $api.request(originalRequest);
    } catch (e) {
      console.log('НЕ АВТОРИЗОВАН')
    }
  }
  throw error;
});

export default $api;