Api-запрос направляется на порт Frontend 3000 вместо Backend 5000 - PullRequest
0 голосов
/ 05 марта 2020

Я установил Express Бэкэнд-сервер с сервером React Frontend. Я также настроил файл действий в Redux, чтобы сделать запрос к серверу API для получения данных. Вот как выглядит файл действий:

import axios from 'axios';

import {REGISTER_SUCCESS, 
    REGISTER_FAIL, 
    USER_LOADED, 
    AUTH_ERROR,
    LOGIN_SUCCESS,
    LOGIN_FAIL} from './types';

import {setAlert} from './alert';

import setAuthToken from '../utils/setAuthToken';

//Load User
export const loadUser = () => async dispatch => {
    if(localStorage.token) {
        setAuthToken(localStorage.token);
    }

    try {
        const res = await axios.get('/api/auth');

        dispatch({
            type: USER_LOADED,
            payload: res.data
        });

    } catch(err) {
        dispatch({
            type: AUTH_ERROR
        });
    }
}

//Register User

export const register = ({name, email, password}) => async dispatch => {
    const config = {
        headers: {
            'Content-Type':'application/json'
        }
    }

    const body = JSON.stringify({name, email, password});

    try {
        const res = await axios.post('/api/users', body, config);

        dispatch({
            type: REGISTER_SUCCESS,
            payload: res.data
        });
        dispatch(loadUser());
    } catch(err) {
        const errors = err.response.data.errors;
        if(errors) {
            errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
        }

        dispatch({
            type: REGISTER_FAIL
        });
    }
}

//Login User

export const login = ({email, password}) => async dispatch => {
    const config = {
        headers: {
            'Content-Type':'application/json'
        }
    }

    const body = JSON.stringify({email, password});

    try {
        const res = await axios.post('/api/auth', body, config);

        dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
        });
        dispatch(loadUser());
    } catch(err) {
        const errors = err.response.data.errors;
        if(errors) {
            errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
        }

        dispatch({
            type: LOGIN_FAIL
        });
    }
}

Теперь, когда я загружаю веб-приложение в браузере, оно должно сделать запрос к серверу API на порту 5000. Однако это маршрутизатор на 3000 порт (: 3000 / api / auth). До регистрации работало нормально. Ошибка произошла после того, как я вставил действие входа в систему.

Вот ошибка:

Не удалось загрузить ресурс: сервер ответил со статусом 401 (не авторизован)

Любая помощь будет оценена. Спасибо.

Редактировать: вот файл Package. json файл с настройкой прокси

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "font-awesome": "^4.7.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.1",
    "uuid": "^3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

Редактировать: вот код авторизации. js api:

const express = require('express');
const router = express.Router();
const auth = require('../../middleware/auth');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const config = require('config');
const { check, validationResult } = require('express-validator');

const User = require('../../models/User');

//@route    GET api/auth
//@desc     Test route
//@access   Public
router.get('/', auth, async (req, res) => {
    try {
        const user = await User.findById(req.user.id).select('-password');
        res.json(user);
    } catch(err) {
        console.error(err.message);
        res.status(500).send('Server Error');
    }
});

//@route    POST api/auth
//@desc     Authenticate user and get token
//@access   Public
router.post('/', 
[
    check('email', 'Please include a valid Email').isEmail(),
    check('password', 'Password is required').exists()
], 
async (req, res) => {
    //console.log(req.body);    //need to include body parser to get the data in the body
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
    }

    const { email, password} = req.body;
    try {
        //See if user exists
        let user = await User.findOne({ email: email });
        if (!user) {
            return res.status(400).json({ errors: [{msg: 'Invalid Credentials'}] });
        }

    const isMatch = await bcrypt.compare(password, user.password);

    if(!isMatch) {
        return res.status(400).json({ errors: [{msg: 'Invalid Credentials'}] });
    }
        //Return Json webtoken
        const payload = {
            user: {
                id: user.id
            }
        };

        jwt.sign(payload, 
            config.get('jwtSecret'), 
            {expiresIn: 360000},
            (err, token) => {
                if(err) throw err;
                res.json({token});
            }
            );

    } catch(err) {
        console.error(err.message);
        res.status(500).send('Server Error');
    }
});

module.exports = router;

Редактировать: вот вывод терминала:

[nodemon] 2.0.2
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching dir(s): *.*
[0] [nodemon] watching extensions: js,mjs,json
[0] [nodemon] starting `node server.js`
[0] Server started on port 5000
[0] MongoDB connected
[1] i 「wds」: Project is running at http://192.168.1.45/
[1] i 「wds」: webpack output is served from /
[1] i 「wds」: Content not from webpack is served from E:\Web Projects\devconnector\client\public
[1] i 「wds」: 404s will fallback to /index.html
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view client in the browser.
[1]
[1]   Local:            http://localhost:3000/
[1]   On Your Network:  http://192.168.1.45:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use npm run build.
[1]
[0] [nodemon] restarting due to changes...
[0] [nodemon] starting `node server.js`
[0] Server started on port 5000
[0] MongoDB connected

Редактировать: вот авторизация промежуточного программного обеспечения. js код:

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = function(req, res, next) {
    //Get Token from Header
    const token = req.header('x-auth-token');

    //Check if not token
    if (!token) {
    return res.status(401).json({ msg: 'No token, authorization denied' });
    }

    //Verify Token
    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));

        req.user = decoded.user;
        next();
    } catch(err) {
        res.status(401).json({ msg: 'Token is not valid' });
    }

}

1 Ответ

0 голосов
/ 05 марта 2020

Ошибка не во внешнем интерфейсе. Запросы, переданные через webpackdevserver, выполняются в фоновом режиме, браузер по-прежнему считает, что он обменивается данными с: 3000.

Извлеките промежуточное программное обеспечение Auth, возможно, вы отклоняете запросы от неаутентифицированных пользователей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...