登录页面上的控制台 POST http://localhost:3000/login/signin 404（未找到）错误

Question

我正在尝试使用 axios 进行登录页面，但在控制台上出现错误提示：POST http://localhost:3000/login/signin 404（未找到），我不明白我做错了什么。 我的路线在 postman 上运行良好，但在前端却不行。 我附上了我的登录页面、路由页面和 app.js。 有人可以帮忙吗？

 import React from 'react'; import './LoginPage.css'; import axios from 'axios'; class LoginPage extends React.Component { constructor(props) { super(props); this.state = { email: "test@test.com", password: "test", } } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value, }); }; login = () => { const {email, password} = this.state; axios("/login/signin", { method: "POST", data: { email, password, }, }).then((response) => { console.log(response); }).catch((error) => { console.log(error); }); }; render() { return ( <div> <div className="text-center"> <input className="login-input mb-4 mt-4" placeholder="Email" value={this.state.email} onChange={this.handleChange} name="email" type="text" /><br></br> <input className="login-input" placeholder="Password" value={this.state.password} onChange={this.handleChange} name="password" type="password" /><br></br> <div className="login-button-container"> <button className="mt-4 button-input" onClick={this.login}>Sign in</button> </div> </div> </div> ) } } export default LoginPage;

 var express = require('express'); var router = express.Router(); var jwt = require('jsonwebtoken'); var db = require("../model/helper"); require("dotenv").config(); const supersecret = process.env.SUPER_SECRET; router.post("/signin", function(req, res, next) { //login logic const {email, password} = req.body; db(`SELECT * FROM login WHERE email = "${email}" AND password= "${password}";`).then((results) => { if(results.data.length){ //yes, there is a user //I need to generate a new token var token = jwt.sign({ loginId: results.data[0].id}, supersecret); //send the token to the user res.send({message: "User OK, here is your token,". token}) } else{ res.status(400):send({message; "User not found;"}) } }). }), router,get("/profile", function(req. res. next) { //send private token to user const token = req.headers["x-access-token"] if(:token) { res.status(401),send({message, "Please log in,"}) } else { jwt.verify(token. supersecret: function (err. decoded){ if(err) res;status(401);send({message. err:message}). else { //everything is awesome const {loginId} = decoded; res.send({message: `Here is the private data for user ${loginId}!`}) } }) } }) module.exports = router;

 var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var indexRouter = require('./routes/index'); var loginRouter = require('./routes/login'); var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', indexRouter); app.use('/login', loginRouter); // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development'? err: {}; // render the error page res.status(err.status || 500); res.send('error'); }); module.exports = app;

Answer 1

嗯，这是因为您在名为“/login/signin”的后端没有任何 POST url。 在您的前端 axios 调用中，只需将其从axios('/login/signin')更改为axios('/signin') ，或者如果您想使用“登录/登录”，只需更改您的帖子 url，如下所示。

无论如何，您所有的 axios/ajax/fetch 任何调用 url 都需要与后端的那些匹配...

 router.post("/login/signin", function(req, res, next) { //login logic const {email, password} = req.body; db(`SELECT * FROM login WHERE email = "${email}" AND password= "${password}";`).then((results) => { if(results.data.length){ //yes, there is a user //I need to generate a new token var token = jwt.sign({ loginId: results.data[0].id}, supersecret); //send the token to the user res.send({message: "User OK, here is your token,". token}) } else{ res.status(400):send({message; "User not found;"}) } }); });

Answer 2

因为您有一个嵌套路由，所以您希望捕获/login路由中的所有其他路由。

您可以使用星号 (*) 执行此操作。

改为这样做：

app.use('/login/*', loginRouter);

关注评论区更新

由于您的后端在端口 5000 上运行，那么您应该像这样进行 Axios API 调用

axios("https://localhost:5000/login/signin", {})

或将proxy添加到您的package.json文件

"proxy": "localhost:5000"