POST request 404 (Not Found) with angular.js and ExpressJS

Question

I'm trying to send a request to my ExpressJS server using AngularJS:

angular.module('app').controller('contactCtrl', function($scope, $http) {
    $scope.envoyer = function(nom, organisation, courriel, telephone, message){
        $http.post('/contact', {nom:nom, organisation:organisation, courriel:courriel, telephone:telephone, message:message}).then(function(error, response){
            if(response.data.success){
                console.log('sent!');
            }
        });
    }
});

This is the code from the server:

var mailer = require('nodemailer');

var EMAIL_ACCOUNT_EMAIL = '[email protected]';
var EMAIL_ACCOUNT_PASSWORD = 'aaa';

var smtpTransport = mailer.createTransport({
    service: "Gmail",
    auth: {
        user: EMAIL_ACCOUNT_EMAIL,
        pass: EMAIL_ACCOUNT_PASSWORD
    }
});

app.post('/contact', function(req, res, next){
        var success = true;
        var mailOptions = {
            to: '[email protected]',
            subject: 'qsdxwccvfd',
            html: 'sqdqsdq'
        };

        smtpTransport.sendMail(mailOptions, function(error, res){
            if(error){
                console.log('[ERROR] Message NOT sent: ', error);
                success = false;
            } else {
                console.log('[INFO] Message sent: ' + res.message);
            }
            next(error, success);
        });
});

After the server performs the request, I get this error message on the client side:

POST http://localhost:3002/contact 404 (Not Found) angular.js:8495
(anonymous function) angular.js:8495
sendReq angular.js:8291
$http.serverRequest angular.js:8025
wrappedCallback angular.js:11498
wrappedCallback angular.js:11498
(anonymous function) angular.js:11584
Scope.$eval angular.js:12608
Scope.$digest angular.js:12420
Scope.$apply angular.js:12712
(anonymous function) angular.js:18980
jQuery.event.dispatch jquery.js:4409
elemData.handle

I think that it's coming from the fourth line of the AngularJS code, but I wasn't able to find how to fix it. How can I fix that, please?

The server is indicating that there is no resource at http://localhost:3002/contact. Were you expecting something to be there? What code is providing the implementation of that endpoint? — Martin Atkins
– Martin Atkins, Commented Jul 27, 2014 at 3:03
Your middleware for /contact doesn't return a response. Assuming that's the entire server code (and there isn't some later middleware handling it) then the call to next will return your 404. If you'd like an example of returning JSON data for the client to parse then let me know and I can write one up, assuming that's an express app. — Martin Atkins
– Martin Atkins, Commented Jul 27, 2014 at 3:17
@MartinAtkins, in fact, i'm trying to display a toastr notification in the client side when the email sent works, how do I to set a success attribute at the response and to display a that toastr notification in the other side ? — makrouna harra
– makrouna harra, Commented Jul 27, 2014 at 3:26

Martin Atkins · Accepted Answer · 2014-07-27 03:31:32Z

2

In order to send a successful response to the browser, the call to next at the end of your middleware should be replaced with something like this:

res.set('Content-Type', 'application/json'); // tell Angular that this is JSON
res.send(JSON.stringify({success: success}));

These lines tell express to return a response marked as a success, with a body that is in JSON format with an object that only has the "success" property.

However, in order for this to work you will need to rename the parameter you used in the callback for smtpTransport.sendMail since you called that res and so it is currently hiding the res object from the middleware. So change the header of that function to something like this:

smtpTransport.sendMail(mailOptions, function(error, mailRes){

...and then of course you must change the log line that follows to use mailRes instead of res.

answered Jul 27, 2014 at 3:31

Martin Atkins

76.4k9 gold badges152 silver badges168 bronze badges

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

14 Comments

makrouna harra Over a year ago

I'm getting this error message : TypeError: Object #<Object> has no method 'set'

Martin Atkins Over a year ago

Did you update the mailRes parameter as I indicated? I'd expect that error if res were still the mail-sending result rather than the Express response object.

Martin Atkins Over a year ago

Can you add console.log(res) just before the res.set call, so we can see what exactly that object is here? Looks like somehow it's not the Express response object.

makrouna harra Over a year ago

I've got as response

{ accepted: [ '[email protected]' ],   rejected: [],   response: '250 2.0.0 OK 1406434616 ed15sm14788940wic.9 - gsmtp',   envelope: { from: false, to: [ '[email protected]' ] },   messageId: '1406434615279-ca07793a-8e5861d7-da24b177@localhost' }

Martin Atkins Over a year ago

That sure looks like a response from smtpTransport.sendMail to me. Please make sure the variable name res is only used in the line app.post('/contact', function(req, res, next){ and in the lines I gave in my response. That variable name should not be used anywhere else in the function.

|

spenibus · Accepted Answer · 2015-10-11 02:20:08Z

0

I had the same problem with express 4.0. I fixed it by reinstalling body-parser:

npm install body-parser

Then doing:

git add -A

edited Oct 11, 2015 at 2:20

spenibus

4,41911 gold badges28 silver badges36 bronze badges

answered Oct 11, 2015 at 2:00

Britney Johnson

113 bronze badges

Comments

Lokesh Pandey · Accepted Answer · 2017-10-21 05:53:57Z

0

Its working fine dear. You have given same name to the smtpTransport response as "res", just change it. it will work fine. for snnipet please refer to below given example.

app.post('/contact', function (req, res, next) {
    var success = true;
    var mailOptions = {
        to: '[email protected]',
        subject: 'hey',
        html: 'hello'
    };
    smtpTransport.sendMail(mailOptions, function (error, result) {
        if (error) {
            console.log('[ERROR] Message NOT sent: ', error);
            success = false;
            res.send(error)
        } else {
            console.log('[INFO] Message sent: ' + result);
        }
        res.send(result)
    });
});

edited Oct 21, 2017 at 5:53

Lokesh Pandey

1,78927 silver badges56 bronze badges

answered Jul 27, 2014 at 6:34

xdeepakv

8,1452 gold badges25 silver badges35 bronze badges

Comments

Baris Kayhan · Accepted Answer · 2023-04-06 15:10:03Z

0

I've got also same problem. Even Database inserted and there is no error in my IDE console, where i run my local, comes on browser 404. Adding

res.status(200).json({ message: 'Successful' });

to controller response solved my problem. Info: PATCH works fine without returning Success, but POST not.

edited Apr 6, 2023 at 15:10

answered Apr 6, 2023 at 15:08

Baris Kayhan

112 bronze badges

Collectives™ on Stack Overflow

POST request 404 (Not Found) with angular.js and ExpressJS

4 Answers 4

14 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

14 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related