Struggling with sending HTTP requests to the "http in" node

Hi colleagues,
I'm currently learning web development based on HTTP/JS.
Node-RED: 1.2.9
My current problem/challenge is the following:
I want to transfer a simple JSON object from HTTP/JS code in my browser via the http-in node into a node-red function node for further processing:

JS snippet executed in Browser

 const myInit = {
  method: 'POST',
  headers: {"Header":"MyHeader"},
  mode: 'no-cors',
  cache: 'default',
  body: {"Body":"MyBody"}


On the Node-Red Server side I've set the following

http-in node is configured as "POST" and the URL above.

Executing the js script provides no errors, ( HTTP:200)
the payload coming from the node's output is always "[object ] [object]", and I can't resolve these objects.
The parameters after the "?" are transferred instead correctly

I'd appreciate to get some hints or an example, what's wrong with my approach.
And: how would I get data back into my JS from an http send node ?

Thanks in advance,
Regards Thomas

Show us how you've set up the http-in node and how it's wired to the function node.

Also have you attached a debug node to the http-in node to see exactly what is being sent?

Yes debug node is included:

[{"id":"e2fcc8b37c222ede","type":"debug","z":"f6f2187d.f17ca8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":900,"y":340,"wires":[]},{"id":"86ea9e9c9abe64d8","type":"http response","z":"f6f2187d.f17ca8","name":"output","statusCode":"","headers":{},"x":990,"y":280,"wires":[]},{"id":"5ad3d4e0ed235613","type":"template","z":"f6f2187d.f17ca8","name":"Template","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n    <head></head>\n    <body>\n        <h1>GET: ButtonReceived</h1>\n    </body>\n</html>","output":"str","x":730,"y":280,"wires":[["86ea9e9c9abe64d8"]]},{"id":"8c2d3262.4f0a5","type":"http in","z":"f6f2187d.f17ca8","name":"HTTP IN","url":"/ButtonReceiver","method":"post","upload":false,"swaggerDoc":"","x":480,"y":340,"wires":[["e2fcc8b37c222ede","5ad3d4e0ed235613"]]}]

Thanks for taking care and: is the import of JS OK for debugging ?
Regards Thomas

I think that's possibly because you havent set the correct Headers in your request
Try doing your fetch call like this :

let requestOptions = {
  method: 'POST',
  headers: { 'Content-Type':'application/json'},
  body: { "Body": "MyBody"},

fetch("http://<yourip>:1880/ButtonReceiver", requestOptions)
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

also because fetch takes some time to complete (asynchronous) it always returns a Promise
so in order to get the response you need to tag on a .then.
Now if your ButtonReceiver endpoint replies back with a json that needs to be parsed response.json()
but because .json can also take some time that also returns a Promise .. yea i know :wink: .. and you need a second .then to return the actual data.

Modified the flow a bit to return a json and set your debug node to Complete msg.

[{"id":"e2fcc8b37c222ede","type":"debug","z":"4895ea10b4ee9ead","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":410,"y":940,"wires":[]},{"id":"86ea9e9c9abe64d8","type":"http response","z":"4895ea10b4ee9ead","name":"output","statusCode":"","headers":{},"x":670,"y":1020,"wires":[]},{"id":"8c2d3262.4f0a5","type":"http in","z":"4895ea10b4ee9ead","name":"HTTP IN","url":"/ButtonReceiver","method":"post","upload":false,"swaggerDoc":"","x":270,"y":1020,"wires":[["e2fcc8b37c222ede","6cd9b824e2102efa"]]},{"id":"6cd9b824e2102efa","type":"function","z":"4895ea10b4ee9ead","name":"","func":"msg.statusCode = 200\nmsg.payload = {\n    \"message\": \"Message Received\",\n    \"data\": msg.payload\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":1020,"wires":[["86ea9e9c9abe64d8"]]}]

Some reading material and examples on Fetch

OK, I implemented your proposal, but it doesn't properly work:
There's still no content in the payload and the async reply leads to a syntax error:

JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

which I would interpret as no data is delivered and therefore the parsing fails ?

the code i shared was untested.
use body: JSON.stringify({ "Body": "MyBody" }), in requestOptions to be sure we are sending json

I've checked it and "hurray" it's working. Just to be sure: body has to be a string, not a JSON ?
Because: if I define body as "

body: '({ "Body": "MyBody" })'

I get the same result. Is my conclusion correct ?

What's missing is the return value, as I still only an get empty reply.

yes exactly .. Basically JSON is a string
( a string with a special syntax that can be later parsed and used as a Javascript object )
and i believe because we have the 'application/json' headers in our request thats why node-red's http parses it as such.

What do you mean ?
Its up to you to structure the reply message .. it can be anything.
For example you can post some data to your endpoint .. the http-in node receives it in payload .. you process it .. maybe get some data from a db etc .. and then send it back to the user with the http-response node.

Thanks for the clarification !

and then send it back to the user with the http-response node.

Exactly that one is my problem: I can send back what ever I like and the content of my response from fetch is always empty

Simply saying ...

... makes it a little difficult to understand what could be the problem.

Show us the code :wink:
.. share the index.html or any js files you have for the front-end
and share also the Node-red flow to test so we can try to replicate it and help.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.