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

Question

[Артём Белых]

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

Вот 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'}

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

Answer 1

[Алексей]

Подозреваю, что ваш сервер не отдает 200 на preflight запрос OPTIONS, в итоге с браузера возвращается 401. В postman же все работает, т.к. это фича только браузера и postman не отправляет OPTIONS перед POST запросом.
Если используется nodejs на сервере, то необходимо включить preflight запросы на нужные маршруты, либо для всех, например, можно сделать так:
app.use(cors({ credentials: true, origin: true }))

или разрешить для всех маршрутов через опции:
app.options('*', cors())

Почитать про preflight в express тут

Comments

[Артём Белых]

Всё равно выдаёт 401 (Unauthorized)

[Алексей]

Артём, порты у фронта и бэка разные или одинаковые?

[Артём Белых]

Разные, а как я запущу и сервер и фронт приложения на одном порту.!?