Hi学习使用node和其他后端组件,并在运行简单的输入表单时遇到这个404:
Not Found
404
NotFoundError: Not Found
at /Users/samgniel/Desktop/saas-tutorial/app.js:25:8
at Layer.handle [as handle_request] (/Users/samgniel/Desktop/saas-
tutorial/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/samgniel/Desktop/saas-
tutorial/node_modules/express/lib/router/index.js:317:13)
at /Users/samgniel/Desktop/saas-tutorial/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/samgniel/Desktop/saas-
tutorial/node_modules/express/lib/router/index.js:335:12)
at next (/Users/samgniel/Desktop/saas-
tutorial/node_modules/express/lib/router/index.js:275:10)
at SendStream.error (/Users/samgniel/Desktop/saas-tutorial/node_modules/serve-
static/index.js:121:7)
at SendStream.emit (events.js:210:5)
at SendStream.error (/Users/samgniel/Desktop/saas-
tutorial/node_modules/send/index.js:270:17)
at SendStream.onStatError (/Users/samgniel/Desktop/saas-
tutorial/node_modules/send/index.js:421:12)输入表单的代码为:
<form action="/signup" method="post">
<input required type="email" name="email" id="emailForm" placeholder="Your Email">
<input type="password" name="password" id="passwordForm" placeholder="Password">
<input type="submit" name="" id="" value="Signup!">
</form>.js调用函数为:
app.post('/signup', function(req, res, next) {
console.log(req.body);
});如能帮助解决此错误,我们将不胜感激:)
发布于 2019-11-21 19:23:12
您似乎没有向客户端返回任何响应。纠正这种情况的一种方法是在express提供的res对象中使用send函数。
app.post('/signup', function(req, res, next) {
console.log(req.body);
res.send('Hello World') // this can also take an object as response. res.send({ msg: 'hello world' })
});这也可能有助于改进这一行ok comment out this line app.use(function(req, res, next) { next(createError(404)); });
希望这能有所帮助。
发布于 2019-11-21 19:59:52
抱歉让您久等了..。我试着把它放在codesandbox上...
你可以像这样制作你的Node侧
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const path = require("path");
const app = express();
const router = express.Router();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
router.get("/", function(req, res) {
res.sendFile(path.join(__dirname + "/index.html"));
});
router.post("/signup", (req, res) => {
console.log(req.body);
});
app.use(router);
app.listen(PORT, () => {
console.log(`Server started at PORT:${PORT}`);
});并创建一个HTML文件,您将在其中使用fetch API使用API
像这样的东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="/signup" method="post">
<input
required
type="email"
name="email"
id="emailForm"
placeholder="Your Email"
/>
<input
type="password"
name="password"
id="passwordForm"
placeholder="Password"
/>
<input type="submit" name="" id="submit" value="Signup!" />
</form>
<script>
const emailForm = document.querySelector('#emailForm');
const passwordForm = document.querySelector('#passwordForm');
const submit = document.querySelector('#submit');
const submitFetch = (url, data) => {
fetch(url, {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow',
referrer: 'no-referrer',
body: JSON.stringify(data)
}).then(response => response.json());
};
submit.addEventListener('click', e => {
e.preventDefault();
const data = {
email: emailForm.value,
password: emailForm.value
};
submitFetch('http://localhost:5000/signup', data);
});
</script>
</body>
</html>如果你想看现场直播...我把它放在codesandbox上
https://stackoverflow.com/questions/58973588
复制相似问题