Получение ошибки 401 Unauthorized при входе в React Web App

Когда я нажимаю на кнопку входа на моей веб-странице, построенной с помощью vite-react(frontend:5173), express(server 5000, для обработки cookies httpOnly) и Django(backend:8080). консоль выдает ошибку (GET http://localhost:5000/api/users/me 401 (Unauthorized)). Django терминал с помощью VS Code также выдает ту же ошибку. Я сузил проблему, что это между React и экспресс-сервером. Я также использую redux-toolkit для проекта, и вот часть редуктора, который я использую для обработки получения пользователя

const getUser = createAsyncThunk(
    'users/me',
    async (\_, thunkAPI) =\> {
    try{
            //const accessToken = thunkAPI.getState().auth.accessToken;

            const res = await fetch(`${import.meta.env.VITE_API_URL}/api/users/me`, {
                method: 'GET',
                headers: {
                    Accept: 'application/json',
                    //Authorization: `Bearer ${accessToken}`,
                }
            })
    
            const data = await res.json();
    
            if(res.status === 200){
                return data;
            } else {
                return thunkAPI.rejectWithValue(data);
            }
        } catch(err){
            return thunkAPI.rejectWithValue(err.response.data);
        }
    }

)

VITE_API_URL в моем окружении указывает на localhost:5000.

Вся ошибка исчезает, если я удаляю accessToken и заголовок Authorization, но мне кажется, что это не нужно, если я использую httpOnly, а не локальное хранилище для токенов, и я обрабатываю куки уже в моем 'me express router'. Вот мой 'me router' для express

import express from 'express';
import fetch from 'node-fetch';

const router = express.Router();

router.get('/api/users/me', async (req, res) =\> {
const { access } = req.cookies;

    try{
        const apiRes = await fetch(`${process.env.API_URL}/api/users/me`, {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                Authorization: `Bearer ${access}`,
            }
        });
    
        const data = await apiRes.json();
    
        return res.status(apiRes.status).json(data);
    } catch(err){
        return res.status(500).json({
            error: 'Something went wrong when trying to retrieve user'
        });
    }

})

export default router;

тогда я использую cookieParser в моем index.js и API_URL подключается к localhost:8080 проверено с postman и это работает.

Настройте свой App.js или главный экспресс-файл, используя CORS, или просто используйте сам экспресс-сервер для получения данных для входа в систему из любой БД

import express from 'express';
const router = express.Router();

router.get('/api/users/me', async (req, res) =\> {


    try{
        //If mongo - configure DB connection 
        const apiRes = await loginCollectionName.findOne({someId:ID});
        if(apiRes){
          return res.status(200).json("Login Success");
        }
       
    } catch(err){
        return res.status(500).json({
            error: 'Something went wrong when trying to retrieve user'
        });
    }

})

export default router;

Мой основной файл экспресс-сервера использует cors. нужно ли мне передавать аргументы моему cors? 

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

dotenv.config();

const app = express();

app.use(cors());


app.use(express.json());
app.use(cookieParser());


app.use(loginRoute);
app.use(logoutRoute);
app.use(meRoute);
app.use(registerRoute);


app.get('*', (req, res) => { 
    const indexPath = join(__dirname, 'client', 'dist', 'index.html');
    return res.sendFile(indexPath);
});

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));
Вернуться на верх