搜尋

首頁  >  問答  >  主體

無法將資料從axios傳送到傳回空對象的node伺服器

我的客戶端程式碼:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="form.css" />
  </head>
  <body>
    <form action="/login" method="post" class="form">
      <input type="text" name="txt" class="txt" id="txt" placeholder="name" />
      <input type="submit" class="submit" id="submit" />
    </form>
    <script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      let submit = document.querySelector(".submit");
      const form = document.querySelector(".form");

      form.addEventListener("submit", (e) => {
        e.preventDefault();

        const formData = new FormData(form);

        const formObject = {};
        formData.forEach((value, key) => {
          formObject[key] = value;
        });

        console.log(axios.defaults)

        axios
          .post("http://localhost:8080/login", formObject)
          .then(function (response) {
            console.log(response.data);
          })
          .catch(function (error) {
            console.log(error);
          });
      });
    </script>
  </body>
</html>

我的伺服器端程式碼:

const app = express();
const path = require("path");

app.use(express.static('./public',{index:'form.html'}));

app.use(express.urlencoded({extended:true}));

    app.post('/login',(req,res)=>{
    //const txt = req.body;
      console.log('logged data: ',req.body);
      res.send('Thanks');
    })
app.listen(8080, () => {
  console.log('server is running...in port 8080')

 });

首先請記住,我是後端新手。當我嘗試console.log 記錄的資料時,它返回一個空對象,我無法理解為什麼我的req.body 返回一個空對象,但是當我嘗試透過給出action:"/login" 和方法來執行相同操作時:表單標籤內的“post”它按預期工作並為我提供我提供的輸入。請有人幫助我,我的頭在燃燒,提前謝謝你。

P粉141911244P粉141911244232 天前2591

全部回覆(1)我來回復

  • P粉333186285

    P粉3331862852024-04-01 09:14:42

    req.body 是空的,因為當您使用axios 發送它時,您實際上發送的是JSON (application/json) 負載,且後端沒有JSON 負載解析器,只有URL 編碼,而HTML 表單以application/x-www-form-urlencoded 格式傳送它,這就是它運作的原因。

    因此,您需要使用 axios 發送 URL 編碼的請求,您可以使用 URLSearchParams 將 JSON 物件轉換為查詢字串。試試這個。

    axios
      .post("http://localhost:8080/login", new URLSearchParams(formObject))

    或者,只需在後端添加 JSON 解析器,您的原始 JSON 請求就可以工作,使用內建解析器:

    app.use(express.json());

    回覆
    0
  • 取消回覆