Понятия не имею, что я здесь делаю не так. Метод POST работает из Postman, но не работает из интерфейса React.
users.js (/ api / users / логин)
// @route POST api/users/login
// @desc Login user / Returning JWT Token
// @access Public
router.post('/login', (req, res, next) => {
const { errors, isValid } = validateLoginInput(req.body);
// Check validation
if (!isValid) {
return res.status(400).json(errors);
}
const email = req.body.email;
const password = req.body.password;
// Find user by email
User.findOne({ email }) // matching email: email
.then(user => {
if (!user) {
errors.email = 'User not found';
return res.status(404).json(errors);
}
// Check Password
bcrypt.compare(password, user.password)
.then(isMatch => {
if (isMatch) {
// User matched. Create JWT payload
const payload = {
id: user.id
}
// Sign Token
jwt.sign(
payload,
keys.secretOrKey,
{ expiresIn: 3600 },
(err, token) => {
res.json({
success: true,
token: 'Bearer ' + token
});
});
} else {
errors.password = 'Password incorrect'
return res.status(400).json(errors);
}
});
});
});
Функция loginUser ():
export const loginUser = userData => dispatch => {
axios
.post("/api/users/login", userData)
.then(res => {
// Save to localStorage
const { token } = res.data;
// Set token to localStorage
localStorage.setItem("jwtToken", token); // only stores strings
// Set token to Auth header
setAuthToken(token);
// Decode token to get user data
const decoded = jwt_decode(token);
// Set current user
dispatch(setCurrentUser(decoded));
})
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
Функция onSubmit () в компоненте React:
onSubmit(e) {
e.preventDefault();
const userData = {
email: this.state.email,
password: this.state.password
}
this.props.loginUser(userData);
}
Сеть:
Request URL: http://localhost:3000/api/users/login
Request Method: POST
Status Code: 404 Not Found
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade
Connection: keep-alive
Content-Length: 155
Content-Security-Policy: default-src 'self'
Content-Type: text/html; charset=utf-8
Date: Mon, 16 Jul 2018 01:53:03 GMT
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Powered-By: Express
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 46
Content-Type: application/json;charset=UTF-8
Cookie: io=VtWk-hb742jVakwrAAAE; PHPSESSID=ige5g7257th8hiksjomg2khouu; i18next=en; connect.sid=s%3Aq6FkEveJbDYoKTy386QESFBxGaW8MjKd.qSBAkm2t23Ww4ZtHtcs7%2F1e5tDn528i0C6Hv7U3PwI0
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/login
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
{email: "[email protected]", password: "admin"}
email
:
"[email protected]"
password
:
"admin"
Порт на server.js:
// Initializint the port
const port = process.env.PORT || 5000;
app.listen(port, () => console.info(`Server running on port ${port}`));
Я проверил несколько похожих проблем здесь, и большинство из них были связаны с заголовками. В моем случае заголовки - это application / json, поэтому я не думаю, что проблема в этом. Нет проблем с подключением к конечной точке через Postman.
Отредактировал пост. Это либо process.env.PORT, либо 5000
было ли это приложение для реагирования создано с помощью приложения create-react-app?
Да, я использовал приложение create-response-app, а затем настроил одновременно для запуска и сервера, и клиента. Работает на: 3000





Ваше приложение для реагирования работает на другом порту, чем ваше внутреннее приложение. create-react-app работает на порту 3000, и, как вы заявили, ваш бэкэнд работает на порту 5000.
Когда ваше клиентское приложение делает запрос к серверу, оно фактически делает запрос на порт 3000, как вы можете видеть здесь.
Request URL: http://localhost:3000/api/users/login
Это происходит потому, что вы никогда не указали исходный URL-адрес в своем запросе, как вы можете видеть здесь post("/api/users/login", userData), и в этом случае по умолчанию используется тот же порт, с которого пришел запрос, который является портом 3000, а порт 3000 фактически не имеет URL-адреса, который вы просил.
Вы можете решить эту проблему, включив исходный URL-адрес в запрос или добавив прокси в приложение для реакции package.json, как вы можете здесь.
Оба метода не сработали :( Я добавил локальный: 3000 перед axios.post, а затем в package.json "proxy": "локальный: 5000". По-прежнему получаю 404. Правильно ли я, что эту настройку нужно добавить в скрипты {}? На самом деле , перепробовал все варианты, но все равно безуспешно.
Хорошо, не знаю как, но после нескольких перезапусков package.json указанный прокси 5000 заработал. Большое спасибо, чувак! Я потратил на это 6 часов ...
на каком порту работает ваша экспресс-серверная часть?