ReactJS/Express Axios POST返回404，来自Postman [英] ReactJS/Express Axios POST returns 404, works from Postman
问题描述
我不知道我在做什么错.POST方法可在Postman中使用，但不适用于React前端.
I have no idea what I'm doing wrong here. The POST method works from Postman, but doesn't work from the React frontend.
users.js(/api/users/login)
users.js (/api/users/login)
// @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()函数:
loginUser() function:
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
})
);
};
React组件中的onSubmit()函数
onSubmit() function in React component:
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: "admin@gmail.com", password: "admin"}
email
:
"admin@gmail.com"
password
:
"admin"
server.js上的端口:
The port on server.js:
// Initializint the port
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on port ${port}`));
我在这里检查了一些类似的问题，其中大多数与标题有关.就我而言，标头是application/json，所以我认为问题不存在.通过Postman到达端点没有问题.
I checked some similar issues here, and most of them were related to headers. In my case, the headers are application/json, so I don't think the problem is there. No problems hitting the endpoint through Postman.
推荐答案
您的React应用程序在与后端应用程序不同的端口上运行. create-react-app 运行在端口3000上，正如您所说的，后端运行在端口5000上.
Your react app is running on a different port than your backend app. create-react-app runs on port 3000 and as you've stated your backend is running on port 5000.
当您的客户端应用向服务器发出请求时，实际上是向端口3000发出请求，如您在此处看到的.
When your client side app is making a request to the server, its actually making a request to port 3000 as you can see here.
之所以这样做，是因为您从未在请求中指定原始网址，如您在此处看到的 post("/api/users/login"，userData)一样，在这种情况下，它默认为请求所来自的端口是端口3000，而端口3000实际上没有您请求的URL.
It's doing so because you never specified the origin url in your request as you can see here post("/api/users/login", userData), and in that case it defaults to the same port the request came from which is port 3000, and port 3000 does not in fact have the url you requested.
您可以通过在请求中包括原始URL或在此处将代理添加到react app package.json中来解决此问题.
You can solve this by either including the origin url in the request, or by adding a proxy to the react app package.json as you can here.
这篇关于ReactJS/Express Axios POST返回404，来自Postman的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
