Express.js 未根据 post 请求发送 html 文件
Express.js not sending html file on post request
我只是想根据 POST 请求发送 HTML 文件。我 100% 确定它在一小时前工作。从那以后,我一直想不通为什么突然不行了!
服务器路由器:
const express = require('express');
const router = express.Router();
const cors = require('cors');
const path = require('path');
const auth = require('../middleware/auth.js');
// HOME ROUTE
router.options('/', cors());
router.get('/', cors(), (req, res) => {
res.status(201).sendFile(path.resolve(__dirname, '../', '../', 'public', 'index.html'));
});
router.post('/', cors(), (req, res) => {
res.status(201).sendFile(path.resolve(__dirname, '../', '../', 'view', 'manager.html'));
});
服务器没有错误。
index.html
<form method="POST" autocomplete="off">
<input id="username" type="text" name="username" placeholder="Username" onchange="updateUsername(event)"><br>
<input id="password" type="password" name="password" placeholder="Password" onchange="updatePassword(event)"><br>
<button onclick="submitFunc(event)">LOGIN</button>
</form>
<script>
let username_value = document.querySelector('#username').value;
let password_value = document.querySelector('#password').value;
function updateUsername(e) {
username_value = e.target.value;
}
function updatePassword(e) {
password_value = e.target.value;
}
async function submitFunc(e) {
e.preventDefault();
let response = await fetch('/', {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({
username: username_value,
password: password_value
})
});
console.log(response);
}
请注意,登录逻辑本身不是问题。由于这个问题,我修改了很多代码。
向“/”发送 POST 请求后,这是登录客户端控制台的响应:
所以抓取本身似乎工作得很好。只是新的 HTML 文件没有替换当前的 HTML 文件。我将如何解决这个问题?
您需要实际阅读回复。 await fetch(...)
只是获取 headers 并留下一个 readableStream 和内容等待您使用 response.json()
或 response.text()
阅读实际内容,具体取决于您使用的数据类型期待。
改为:
async function submitFunc(e) {
e.preventDefault();
try {
let response = await fetch('/', {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({
username: username_value,
password: password_value
})
});
// this assumes the response is text or html,
// use response.json() if the response is json
let data = await response.text()
console.log(data);
} catch(e) {
console.log(e);
// decide what to do here if there was an error with the fetch() call
}
}
您可以看到可用于阅读 body 内容的各种不同方法 here on MDN。
此外,如果您使用 fetch()
发出请求,您服务器的响应将返回到您网页中的 Javascript。它不会自动显示在浏览器中。如果你想让它显示在你的浏览器中,那么要么让表单 post 本机(没有 Javascript),要么你必须手动编码你的 Javascript 来接收响应然后插入它自己进入页面内容。
我只是想根据 POST 请求发送 HTML 文件。我 100% 确定它在一小时前工作。从那以后,我一直想不通为什么突然不行了!
服务器路由器:
const express = require('express');
const router = express.Router();
const cors = require('cors');
const path = require('path');
const auth = require('../middleware/auth.js');
// HOME ROUTE
router.options('/', cors());
router.get('/', cors(), (req, res) => {
res.status(201).sendFile(path.resolve(__dirname, '../', '../', 'public', 'index.html'));
});
router.post('/', cors(), (req, res) => {
res.status(201).sendFile(path.resolve(__dirname, '../', '../', 'view', 'manager.html'));
});
服务器没有错误。
index.html
<form method="POST" autocomplete="off">
<input id="username" type="text" name="username" placeholder="Username" onchange="updateUsername(event)"><br>
<input id="password" type="password" name="password" placeholder="Password" onchange="updatePassword(event)"><br>
<button onclick="submitFunc(event)">LOGIN</button>
</form>
<script>
let username_value = document.querySelector('#username').value;
let password_value = document.querySelector('#password').value;
function updateUsername(e) {
username_value = e.target.value;
}
function updatePassword(e) {
password_value = e.target.value;
}
async function submitFunc(e) {
e.preventDefault();
let response = await fetch('/', {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({
username: username_value,
password: password_value
})
});
console.log(response);
}
请注意,登录逻辑本身不是问题。由于这个问题,我修改了很多代码。
向“/”发送 POST 请求后,这是登录客户端控制台的响应:
所以抓取本身似乎工作得很好。只是新的 HTML 文件没有替换当前的 HTML 文件。我将如何解决这个问题?
您需要实际阅读回复。 await fetch(...)
只是获取 headers 并留下一个 readableStream 和内容等待您使用 response.json()
或 response.text()
阅读实际内容,具体取决于您使用的数据类型期待。
改为:
async function submitFunc(e) {
e.preventDefault();
try {
let response = await fetch('/', {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({
username: username_value,
password: password_value
})
});
// this assumes the response is text or html,
// use response.json() if the response is json
let data = await response.text()
console.log(data);
} catch(e) {
console.log(e);
// decide what to do here if there was an error with the fetch() call
}
}
您可以看到可用于阅读 body 内容的各种不同方法 here on MDN。
此外,如果您使用 fetch()
发出请求,您服务器的响应将返回到您网页中的 Javascript。它不会自动显示在浏览器中。如果你想让它显示在你的浏览器中,那么要么让表单 post 本机(没有 Javascript),要么你必须手动编码你的 Javascript 来接收响应然后插入它自己进入页面内容。