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 来接收响应然后插入它自己进入页面内容。