Невозможно получить доступ к данным формы на сервере - PullRequest
Новая
       1

Невозможно получить доступ к данным формы на сервере

0 голосов
/ 03 июня 2019

Я делаю запрос пут из внешнего интерфейса, для которого я использую XMLHttpRequest and FormData запрос API, но на стороне сервера я не получаю никаких данных, таких как req.params, req.body and req.query все пустые

Код переднего конца 

var reportSub = () => {

        var report = document.getElementById('report');

        var formData = new FormData(report)



    let xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.response)
        }
    }

    var queryString = new URLSearchParams(formData);

    xhr.open("PUT", '/threads/edit', true);
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
    xhr.send(queryString)

}
 var reportsub = document.querySelector('#repsub');
 reportsub.addEventListener("click",(e)=>{
        e.preventDefault();

        reportSub();
    })

Код на стороне сервера 


router.put('/threads/edit',(req,res)=>{

    let board = req.body.board;
    let id = req.body.id;

    console.log(req.query,req.body)

    Board.findById({_id: ObjectId(id)},(error,data)=>{

      if(error)
          res.send(error)

      if(data!==null){
        data.Reprot = true;
        data.save((error,sd)=>{

          if(error)
              res.send(error)

           res.send(sd);   
        })
      } 
      else{
        res.send({"Error":"Id does not exist "})
      }   
    })
})

Существует одно решение: вы добавляете в URL данные, которые снова жестко закодированы в каждой переменной и данных, которые вам нужно было передать.Вот и я хочу использовать интерфейс FormData для отправки данных.

1 Ответ

0 голосов
/ 03 июня 2019

Я думаю, что вам не хватает библиотеки для разбора запроса FormData.Вы также можете отправлять данные, используя JSON, поскольку они только текстовые, это упростит анализ.Минимальный пример может выглядеть следующим образом:

server.js

const express = require("express");
const multer = require("multer");
const upload = multer();
const app = express();

app.use(express.static('public'))

app.post('/data', upload.none(), function (req, res) {
    console.log(req.body.favoriteNumber);
    res.send('42 is the only real choice');
});

app.listen(3000, function () {
    console.log('App listening on port 3000!');
});

public/index.html

<!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 id="textForm">
        <p>Your favorite number:</p>
        <input type="text" value="42" name="favoriteNumber" />
    </form>
    <button id="send">Send</button>
    <script>
        const sendButton = document.getElementById("send");
        const form = document.getElementById("textForm");
        sendButton.addEventListener("click", () => {
            let xhr = new XMLHttpRequest();

            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.response);
                }
            }

            const formData = new FormData(form);
            xhr.open("POST", '/data', true);
            xhr.send(formData);
        })
    </script>
</body>

</html>

Вам не нужно устанавливать заголовок вручную.Он устанавливается автоматически и включает boundary - параметр, который вы не можете знать при написании приложения.Заголовок может выглядеть следующим образом: 

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuzeaYvzY77jzcFeA
...