How to fix 401 (Unauthorized)? - reactjs

Question

I have done jwt authorization and registration. But when checking whether the user is authorized, he issues 401 Unauthorized sent a request to receive a refresh token via axios
Here is the authorization verification 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);
}
}
here is the 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})
Here is the app component:
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() // here I did 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>) : 'log in'}
</div>
);
}
export default App;
Here are the axios settings, but I tried using fetch() and the result is the same (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('NOT AUTHORIZED')
}
}
throw error;
})
export default $api;
I installed cars on the server and call it like this
app.use(cors()) // Use this after the variable declaration / I tried such settings, it didn't help {credentials: true, origin: 'http://localhost:3000'}
For some reason, a 401 error pops up, although everything works in postman!
Why don't I know anymore!???