I am making an Express application that takes in (binary) post data. Here is my code below.
Server-side:
var express = require('express');
var app = express();
var PORT = 3000;
app.use(express.raw());
app.post('/', function(req, res) {
console.log(req.body);
res.end();
});
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(PORT, function() {
console.log("Server listening on port", PORT);
});
index.html:
<script>
fetch("/", {
method: "POST",
body: "hello world",
});
</script>
However, when I run this code, when logging the request body, it logs an empty object. And when I looked at the documentation, it says that the request body will be an empty object if there was no body to parse. But I had a body in the request. What am I doing wrong here?
express.raw() only works if you set your Content-Type header in your fetch to `application/octet stream. So your new fetch method would look like this.
fetch("/", {
method: "POST",
body: "hello world",
headers: {
"Content-Type": "application/octet-stream"
}
});
But what if you don't want the content type to be application/octet-stream? In this case, you can specify in the express.raw() options that the content type to parse the body can be any type. How to do this? Replace this:
app.use(express.raw());
With this:
app.use(express.raw({type: '*/*'}));
The type option is the needed content type for body-parser to parse the body, and the */* means that any content type will be accepted.
For express.raw() to parse, add "Content-Type": "application/octet-stream" inside headers in your fetch(). Like so:
fetch("/", {
method: "POST",
body: "hello world",
headers: {
"Content-Type": "application/octet-stream",
},
});
Use this for your usecase
app.use(express.text());
Related
I'm trying to send data from client's inputs based on React.js to server written in Node.js which put it to DB. I have no errors and after submit, new records show in database but they are empty. I have two inputs and I'm joining them in one string and trying send it to DB (so DB has one property). Can you check my code and see what is wrong? Maybe something with headers...
This is function in React component:
addCompetitor = event => {
event.preventDefault();
const name = this.state.draftCompetitorName;
const lastname = this.state.draftCompetitorLastname;
fetch(`http://localhost:5000/competitors`, {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: `${name}${lastname}` })
})
.then(response => response.json())
};
This is server POST response:
app.post("/competitors/", urlencodedParser, function (req, res) {
const newCompetitor = new Competitor({ name: req.body.name });
newCompetitor.save().then(competitor => res.json(competitor));
});
And it's app configuration:
app.use(function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, OPTIONS, PUT, PATCH, DELETE"
);
res.setHeader(
"Access-Control-Allow-Headers",
"Content-Type",
"X-Requested-With"
);
res.setHeader("Access-Control-Allow-Credentials", true);
next();
});
If not first install bodyparser. This parses incoming request bodies in a middleware before your handlers, which will be available under the req.body property.
app.use(bodyParser.json({
limit: '50mb',
parameterLimit: 100000
}))
Alternatively what is the express version you are using ? Is it greater than 4.16? Then you can also use
app.use(express.json());
See notes here
https://expressjs.com/en/api.html#express.json
Modify your code
let databody = {
"name": `${name}${lastname}`,
"otherprop": this.state.otherprop
}
From frontend use
body: JSON.stringify(databody),
In express end remove urlencodedParser , should be like below:
app.post("/competitors", function (req, res) {
console.log(req.body);
});
You are using urlencodedParser as a middleware so I guess you used bodyParser.urlencoded({}) but your request is sending a json format. Try adjusting your request by adding the following header:
'Content-Type': 'application/x-www-form-urlencoded'
EDIT:
Also body should be in the following format:
body: `name=${name}${lastname}`
Goal: send some defined string data from HTML in a fetch() function e.g. "MY DATA"
My code:
HTML
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function fetcher() {
fetch('/compute',
{
method: "POST",
body: "MY DATA",
headers: {
"Content-Type": "application/json"
}
}
)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
}
</script>
</body>
</html>
Server.js
var express = require("express");
var app = express();
var compute = require("./compute");
var bodyParser = require("body-parser");
//not sure what "extended: false" is for
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/compute', (req, res, next) => {
console.log(req.body);
var result = compute.myfunction(req.body);
res.status(200).json(result);
});
Currently: console.log(req.body) logs {}
Desired: console.log(req.body) logs "MY DATA"
NOTES:
I also tried sending body in fetch() as body: JSON.stringify({"Data": "MY DATA"}) but get the same empty {}
I either my fetch() request, or my bodyParser(), is not setup correctly.
Add the following line in addition to your current bodyParser app.use() right before:
app.use(bodyParser.json());
This will enable bodyParser to parse content type of application/json.
Hopefully that helps!
I feel a bit stupid now once I worked out what bodyParser.urlencoded (source: https://www.npmjs.com/package/body-parser#bodyparserurlencodedoptions)
Returns middleware that only parses urlencoded bodies
Solution
Changed the fetch() request, from:
body: "MY DATA",
headers: { "Content-Type": "application/json" }
to
body: JSON.stringify({"Data": "MY DATA"}),
headers: { "Content-Type": "application/x-www-form-urlencoded" }
which solved the problem! Console logged:
{ '{"Data":"MY DATA"}': '' }
I am trying to send data through axios request to my backend script, but the body looks empty.
Here's a request sent from front-end:
axios.request({
method: 'GET',
url: `http://localhost:4444/next/api`,
headers: {
'Authorization': token
},
data: {
next_swastik: 'lets add something here'
},
}).then((res)=>{
console.log("api call sucessfull",res);
}).catch((err)=>{
console.log("api call unsucessfull",err);
this.props.toggleLoading(false);
})
Here's a back-end:
app.get('/next/api', verifyToken, function(req, res) {
console.log(req.body);
})
But I am getting {} empty body. I am getting headers and other data but not data.
GET requests should not have a body.
Change the method from 'GET' to 'POST'
Like so:
axios.request({
method: 'POST',
url: `http://localhost:4444/next/api`,
headers: {
'Authorization': token
},
data: {
next_swastik: 'lets add something here'
},
})
and change your api to expect a post
app.post('/next/api', verifyToken, function(req, res) {
console.log(req.body);
});
or
Change the data property to params
axios.request({
method: 'GET',
url: `http://localhost:4444/next/api`,
headers: {
'Authorization': token
},
params: {
next_swastik: 'lets add something here'
},
})
and change the api to log out the params
app.get('/next/api', verifyToken, function(req, res) {
console.log(req.params);
});
and like #MaieonBrix said, make sure that your headers contain the content type that you are sending.
It looks like you only have two points left to make it work :
one : the http method should be set to POST instead of GET since you want to send something.
two : you can then add the http header (like what you did with the authorization header) Content-Type: 'application/json`
On the back-end don't forget to use some kind of body parser utility package like this one : body-parser and set it up with your app.
I suppose your server is using express, here is how you will do it with express :
const express = require('express');
const app = express();
const bodyParser = require('body-parser')
const jsonParser = bodyParser.json();
app.use(jsonParser); // use it globally
app.get('your_route', jsonParser, otherMiddleware, (req, res) => ...); // use it for specific routes
/* ... rest of your code */
If you get an error that "bodyParser is deprecated", try this -
app.use(express.json()); //To parse JSON bodies (Applicable for Express 4.16+)
And use "post" method, if you want to get data from body of the HTTP request.
Try this
this.axios('realties', { params: this.filter })
I'm trying to learn express and front javascript. I am trying to pass json data via post request with fetch API and want to take in on backend with express.
My backend code looks like this:
const express = require('express');
const app = express();
const path = require('path');
app.get('/log', function(req, res){
console.log("Hi");
});
app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));
app.listen(3000, () => console.log('Example app listening on port 3000!'));
and my index.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Fetch And Express Test</title>
</head>
<body>
<input id="a">
<input id="b">
<button> Click</button>
<script>
document.getElementsByTagName("button")[0].addEventListener("click",function(){
console.log("Here");
let aInput = document.getElementById("a").value;
let bInput = document.getElementById("b").value;
let json = {"a": aInput, "b": bInput};
var data = new FormData();
data.append( "json", JSON.stringify(json));
fetch('http://localhost:3000/log', {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: {
"Content-Type": "application/json; charset=utf-8",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: data, // body data type must match "Content-Type" header
})
.then(function(res){});
});
</script>
</body>
</html>
Problem here is that, it doesn't log "Hi", whereas if I delete the second parameter of fetch function and only send get request, everything works fine. What's the problem?
Your router is only set to log on a GET request, so it won't log on a POST
See here
app.get('/log', function(req, res){
console.log("Hi");
});
app.post('/log', function(req, res){
console.log("Hi");
});
Alternatively, you can use app.all to handle all requests.
There is a special routing method, app.all(), used to load middleware functions at a path for all HTTP request methods. For example, the following handler is executed for requests to the route “/secret” whether using GET, POST, PUT, DELETE, or any other HTTP request method supported in the http module.
app.all('/log', function (req, res, next) {
console.log("Hi");
})
I have a cordova project where I do the following request.
$("#asd").on("click",function(){
var data = {};
data.title = "title";
data.message = "message";
$.ajax('127.0.0.1:3000/register',
{
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
success: function() { console.log('success');},
error : function() { console.log('error');}
});
});
Server side code:
var express = require('express');
var app = express();
app.use(express.bodyParser());
app.post('/register', function(req, res){
var obj = {};
console.log('body: ' + JSON.stringify(req.body));
res.send(req.body);
});
app.listen(3000);
But I get Internal Server Error 500 when I send the request. If I make a request simply by an html form or curl it just works fine.
What might be the cause of this?
$.ajax({
url:'/register', //or 'localhost:3000/register'
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
success: function() { console.log('success');},
error : function() { console.log('error');}
});
Also you are required to use cors()
var cors = require('cors')
var app = express();
app.use(cors());
Also: https://enable-cors.org/server_expressjs.html
If it's related to the CORS, then you need to allow CORS on the server wich serves static via adding the following HTTP header:
Access-Control-Allow-Origin: http://127.0.0.1:3000
Here is the example for Express (they put a wildcard * instead of http://127.0.0.1:3000).
Try JSON.stringify() in response
res.send(JSON.stringify(req.body));