Server-side access to form data has been restricted

Question

Server-side access to form data has been restricted

When I make a PUT request from the frontend, I am currently using the XMLHttpRequest and FormData API. However, on the server side, I am not receiving any data such as

req.params, req.body, and req.query

are all empty.

Front-end Implementation

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();
    })

Server-side Code


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 "})
      }   
    })
})

One possible solution is to hard code the data in the URL for each variable that needs to be passed, which is not ideal. That's why I prefer using the FormData interface to send data.

javascript express xmlhttprequest

Answer 1

Answer №1

It seems like there might be a missing library needed for parsing the FormData request in your code. Another approach could be sending the data using JSON as it is text-only, which would make the parsing process simpler. Here's a minimal example that demonstrates this:

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>

There's no need to manually set the header in this case, as it's automatically configured and includes the boundary parameter - which you don't need to worry about while coding. The header might look similar to:

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

Answer 2

It seems like there might be a missing library needed for parsing the FormData request in your code. Another approach could be sending the data using JSON as it is text-only, which would make the parsing process simpler. Here's a minimal example that demonstrates this:

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>

There's no need to manually set the header in this case, as it's automatically configured and includes the boundary parameter - which you don't need to worry about while coding. The header might look similar to:

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

Server-side access to form data has been restricted

Front-end Implementation

Server-side Code

Answer №1

Similar questions

Create object keys without relying on any ORM or database management systems like mongoose or mongodb

Is it necessary to release a new library version for non-functional updates?

Utilizing JavaScript and JSON to Retrieve Array Elements by Key Names as Indexes

What could be the reason for the undefined initial state in my vuex store?

Enable the execution of a function only once a specific period of time has elapsed

A versatile multi-select jQuery widget featuring the ability to choose options within a specific opt

Issue with Node Canvas/Resemble.js: The image provided has not finished loading during the load operation

javascript increment variable malfunctioning

Should we enable client-side validation and unobtrusive JavaScript in the Web.config file?

The SharedArrayBuffer does not exist in this context

Passing variables to all routes in Express is a useful way to ensure that data

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

Strange rendering issues when using the react material-ui dialog

Retrieve the currently logged-in user whenever the component is rendered using React's Context API

Navigating to URL with Query String correctly using Express

Checkbox Hierarchy: Children marked as either Checked or Unchecked based on parent selection

error occurred while looping through json array

The thickness of the line on the Google line chart is starting to decrease

Unhook, add at the beginning, and set requirements jQuery

What steps can be taken to resolve the vulnerability in webpack-pwa-manifest?