javascript - 登录页面上的控制台 POST http://localhost:3000/login/signin 404(未找到)错误
问题描述
我正在尝试使用 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: "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;
解决方案
嗯,这是因为您在后端没有任何名为“/login/signin”的 POST url。在您的前端 axios 调用中,只需将其从axios('/login/signin')
to更改为,axios('/signin')
或者如果您想使用“登录/登录”,只需更改您的帖子网址,如下所示。
无论如何,您所有的 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!"})
}
});
});
推荐阅读
- javascript - Vue 功能组件抛出 _c is not defined 错误
- c# - Checkcombobox item is not checked
- ios - 在后台调用 ios 应用程序并在应用程序关闭或终止时执行一些代码
- javascript - 关于 mxGraph:如何先添加 Edge,然后添加自己的自定义属性,然后添加到图形中?
- c# - SSH.NET 中的 MySQL 端口转发 - 尝试以访问权限禁止的方式访问套接字
- powerbi - Power BI - 使用切片器从文件夹中获取文件
- c# - 单击按钮使用 Angular 打开带有附件的电子邮件(Outlook)
- amazon-web-services - AWS 放大身份验证如何删除重定向 uri
- spring - 无法在 STS 中创建 spring starter 项目
- java - 房间模式导出目录 - 找不到参数的方法 javaCompileOptions()