So I have a simple Javascript on the frontend:
var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('param1', 'value1');
data.append('param2', 'value2');
xhr.open('POST', '/query');
xhr.onload = function(data){
console.log('loaded', this.responseText);
};
xhr.send(data);
and on the node side:
var express = require('express');
var app = express();
app.use( bodyParser.json() );
app.use( bodyParser.urlencoded() );
app.post('/query', function(req, res){
console.log(req.body);
res.send('ok');
});
when i run it, the console logs an empty object {}
If i try using a proper form like:
<form method="POST" action="/query">
<input type="text" name="param1" value="value1">
<input type="text" name="param2" value="value2">
<button type="submit">Submit</button>
</form>
everything goes as expected and the console logs:
{ param1: 'value1', param2: 'value2' }
What am I doing wrong?
Because the FormData object is always sent as multipart/formdata by XHR. https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#dom-xmlhttprequest-send
You can parse the FormData by multer. Or send as string form (json or query string) instead of FormData if you will not send any binary files.
The following code sends json string and the server can parse the data.
var xhr = new XMLHttpRequest();
var data = {
param1: 'value1',
param2: 'value2'
};
xhr.open('POST', '/query');
xhr.onload = function(data) {
console.log('loaded', this.responseText);
};
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));