我正在尝试使用 axios 做一个登录页面，但在控制台上出现错误： POST http://localhost:3000/login/signin 404 (Not Found) ，我不明白我做错了什么。我的路线在邮递员上工作得很好，但在前端却不行。我附上了我的登录页面、路线页面和 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: "[email protected]",
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;因为您有一个嵌套路线，所以您希望捕获
/login您可以使用星号 (*) 来完成此操作。
改为这样做：
app.use('/login/*', loginRouter);
后续更新请评论区
由于您的后端在端口 5000 上运行，那么您应该像这样进行 Axios API 调用
axios("https://localhost:5000/login/signin", {})
或将
proxypackage.json"proxy": "localhost:5000"这是因为您在后端没有任何名为“/login/signin”的 POST url。在您的前端 axios 调用中，只需将其从
axios('/login/signin')axios('/signin')无论如何，所有 axios/ajax/fetch 任何调用 url 都需要与后端的 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!"})
}
});
});import React from 'react';
import './LoginPage.css';
import axios from 'axios';
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "[email protected]",
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,mampara12
},
})
.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="Pretty Mokoena ʢʡ
type="mampara12
/><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;