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.
请求地址:http://localhost:3000/api/users/login
这样做是因为您从未在请求中指定原始 url，正如您在此处看到的 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屋！
