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

General
1

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

 data=fetch('https://nodered/ButtonReceiver?Name=123456',myInit)

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)
but:
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

2

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?

3

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

4

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

5

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 ?

6

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

7

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.

8

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.

9

Thanks for the clarification !

Blockquote
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

10

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.

11

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