Блог

Я просто пытаюсь отправить HTML-файл по POST-запросу. Я на 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(...) просто получает заголовки и оставляет там 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
     }
 }
  

Вы можете увидеть различные различные методы, доступные для чтения содержимого тела, здесь, в MDN.

Кроме того, если вы делаете запрос с fetch() помощью, ответ с вашего сервера просто вернется к вашему Javascript на вашей веб-странице. Он НЕ будет автоматически отображаться в браузере. Если вы хотите, чтобы он отображался в вашем браузере, то либо разрешите форме post изначально (без Javascript), либо вам придется вручную закодировать свой Javascript для получения ответа, а затем самостоятельно вставить его в содержимое страницы.