Sending POST form data from AngularJS client to Express/Node.js server

Question

I am trying to read data from an AngularJS form and send it to an Express server. My client function to send the data does execute, but the request never reaches the server. I believe there is an issue with the URLs.

Relevant part of my AngularJS controller:

$scope.loginUser = function() {
   $scope.statusMsg = 'Sending data to server...';
   $http({
      url: 'http://##.##.##.##/login.js', // IP address replaced with ##'s
      method: 'POST',
      data: user,
      headers: {'Content-Type': 'application/json'}
})

This does execute, because I see the message appear from the first line. The url is the absolute path of my Express server. What should this URL be? (Does it need to point to some existing file?)

Relevant part of my Express server (login.js in the same directory):

var express = require("express");
var bodyParser = require("body-parser");
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('*', function(req, res) {
   console.log('Processing request...');
   res.sendFile('/success.html');
});

app.listen(3000);

I execute this server, and it listens on port 3000 as it should. But when my client executes, the app.post method above never runs, because I never see the Processing request... output on the console. What should the path here be? Does it need to agree with the URL in the client?

What is the issue here? I believe the overall structure is OK, but what should the paths/URLs be? (i.e., not just their values for the case above, but their semantics. The online documentation didn't make this clear.)

If it helps, my HTML form uses method="post" and no action specified. I have adjusted these and many other settings with no luck.

thatWiseGuy · Accepted Answer · 2015-11-06 18:32:46Z

3

The answer is a combination of the answers listed.

Do not list the extension of the Express server in the URL.
Include port number as :3000 immediately following the IP address.

AngularJS client:

url: 'http://##.##.##.##:3000/login'

Express server route:

 app.post('/login', function(req, res) {
     console.log('Processing request...');
     res.sendFile('/success.html');
 });

I also found out that the security group for my Amazon Web Services instance was blocking incoming traffic on port 3000. My application worked after I opened this port to the outside world.

answered Nov 6, 2015 at 18:32

thatWiseGuy

4202 gold badges5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ricky · Accepted Answer · 2015-10-16 04:48:19Z

1

Just use '/login' only don't use full path

$scope.loginUser = function() {
   $scope.statusMsg = 'Sending data to server...';
   $http({
      url: '/login', // No need of IP address
      method: 'POST',
      data: user,
      headers: {'Content-Type': 'application/json'}
})

answered Oct 16, 2015 at 4:48

ricky

1,6841 gold badge13 silver badges25 bronze badges

1 Comment

thatWiseGuy Over a year ago

If I do it this way, the client receives a response, but the data sent is the entire code of the server login.js, so the server never handles the request. I'm just trying to send data to the server and have it operate on that data. Do you know how to do this?

Amit Garg · Accepted Answer · 2015-10-16 05:04:23Z

0

If we see the code in your login.js file then it show clearly that it will be run from console.

node login.js

Which will create server instance to response for any post request. Change the url.

$scope.loginUser = function() {
   $scope.statusMsg = 'Sending data to server...';
   $http({
      url: 'http://##.##.##.##:3000', //Your url will be like this.
      method: 'POST',
      data: user,
      headers: {'Content-Type': 'application/json'}
});

answered Oct 16, 2015 at 5:04

Amit Garg

3,9071 gold badge30 silver badges37 bronze badges

2 Comments

thatWiseGuy Over a year ago

Still doesn't work. If I include the port, it times out, even though nmap shows port 3000 as open. Without specifying the port, the data returned to the client is the code of the server login.js, so the server never receives the request. Why isn't the POST request going through on port 3000 to the server? I'm testing using Firefox's RESTClient, and I get no response.

thatWiseGuy Over a year ago

I might have found the problem. Using nmap on the same server shows port 3000 as open, but from another machine that port is not listed. So how can I make this port open to the outside world? My Express server is listening on this port.

Oscar Perez · Accepted Answer · 2016-08-19 01:00:31Z

0

Try using "params" instead of "data" on $http, it doesn't matter if headers are "application/x-www-form-urlencoded" or "application/json" but using "json" it will catch "req.query.param1" on NodeJS. It worked from me, hope it helps

answered Aug 19, 2016 at 1:00

Oscar Perez

511 silver badge5 bronze badges

Collectives™ on Stack Overflow

Sending POST form data from AngularJS client to Express/Node.js server

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related