POST http: // localhost: 3000/api/Anmeldung 400 (ungültige Anforderung)

Question

Ich bin neu im MEAN-Stack und habe Probleme beim Senden von Registrierungsdaten über http.post.

Hier ist mein Server-Code:

var express = require('express'), 
    bodyParser = require('body-parser'), 
    methodOverride = require('method-override'), 
    errorHandler = require('express-error-handler'), 
    morgan = require('morgan'), 
    routes = require('./routes'), 
    api = require('./routes/api'), 
    http = require('http'), 
    path = require('path'), 
    usersController = require('./public/js/userscontroller.js'); 

var app = module.exports = express(); 

var mongoose = require('mongoose'); 
var connection = require('./config/database')(mongoose); 
var models = require('./models/models')(connection); 
var cons = require('consolidate'); 


/** 
* Configuration 
*/ 

// all environments 
app.set('port', process.env.PORT || 3000); 
app.set('views', __dirname + '/views'); 
app.engine('html', cons.swig); 
app.set('view engine', 'html'); 
app.use(morgan('dev')); 
app.use(bodyParser.json()); 
app.use(methodOverride()); 
app.use(express.static(path.join(__dirname, 'public'))); 

var env = process.env.NODE_ENV || 'development'; 

// development only 
if (env === 'development') { 
    app.use(errorHandler()); 
} 

// production only 
if (env === 'production') { 
    // TODO 
} 


/** 
* Routes 
*/ 

// serve index and view partials 
app.get('/', routes.index); 
app.get('/partials/:name', routes.partials); 

// JSON API 
app.post('/api/signup', api.signup); 

// redirect all others to the index (HTML5 history) 
app.get('*', routes.index); 


/** 
* Start Server 
*/ 

http.createServer(app).listen(app.get('port'), function() { 
    console.log('Express server listening on port ' + app.get('port')); 
}); 

Hier mein api ist:

/* 
* Serve JSON to our AngularJS client 
*/ 
var User = require('../models/user'); 


exports.name = function (req, res) { 
    res.json({ 
    name: 'Bob' 
    }); 
}; 


exports.signup = function (req, res, next){ 
    console.log("in signup in API"); 
    if(!req.body.username || !req.body.password){ 
     return res.status(400).json({message: 'Please fill out all feelds'}); 
    } 
    var user = new User(); 
    user.username = req.body.username; 
    user.setPassword(req.body.password); 
    console.log("after set password"); 
    user.save(function(err, result) { 
     if(err){return next(err); } 
     res.json(result); 
    }); 
}; 

Und hier ist meine Client-Seite JS app.js:

'use strict'; 

// Declare app level module which depends on filters, and services 

angular.module('myApp', [ 
    'myApp.controllers', 
    'myApp.filters', 
    'myApp.services', 
    'myApp.directives', 
    'ngResource' 
]). 
config(function ($routeProvider, $locationProvider) { 
    $routeProvider. 
    when('/view1', { 
     templateUrl: 'partials/partial1', 
     controller: 'usersController' 
    }). 
    when('/view2', { 
     templateUrl: 'partials/partial2', 
     controller: 'usersController' 
    }). 
    otherwise({ 
     redirectTo: '/view1' 
    }); 

    $locationProvider.html5Mode(true); 
}). 
factory('auth', ['$http', '$window', function($http, $window, auth){ 
    var auth = {}; 

    //saves token 
    auth.saveToken = function (token){ 
    $window.localStorage['nicerpg-token'] = token; 
    }; 

    //Attempts to register the user 
    auth.signup = function(user){ 
    console.log(user); 
    $http({ 
     method: "POST", 
     url: "/api/signup", 
     headers: {"Content-Type": "application/json"} 
    }); 
    // return $http.post('/api/signup', user).success(function(data){ 
    // //auth.saveToken(data.token); 
    // }); 
    }; 

    return auth; 
}]); 

schließlich hier ist die controllers.js:

'use strict'; 

/* Controllers */ 

angular.module('myApp.controllers', []). 
    controller('AppCtrl', function ($scope, $http) { 

    $http({ 
     method: 'GET', 
     url: '/api/name' 
    }). 
    success(function (data, status, headers, config) { 
     $scope.name = data.name; 
    }). 
    error(function (data, status, headers, config) { 
     $scope.name = 'Error!'; 
    }); 

    }). 
    controller('usersController', ['$scope', '$resource', 'auth', function ($scope, $resource, auth) { 
    // write Ctrl here 
    var User = $resource('/api/users'); 
    var Signup = $resource('/signup'); 

     //Gets all the users 
    User.query(function(results) { 
     //console.log(results); 
     $scope.users = results; 
    }); 

    $scope.signup = function(){ 
     auth.signup($scope.registerform); 

     // .error(function(error){ 
     // console.log(error); 
     // $scope.error = error; 
     // }).then(function(){ 
     // }); 

     User.query(function(results) { 
     // console.log(results); 
     $scope.users = results; 
     }); 
     $scope.registerform = ''; 

    }; 

    }]); 

Wenn ich localhost: 3000/api/signup in meinen Browser setze bekomme ich die erwartete fehlende Felder Antwort; Wenn ich jedoch versuche, den Code mit http.post auszuführen, wird 400 ungültige Anforderung zurückgegeben. Ich habe versucht, die HTTP-Header Content-Typ mehrmals ohne Glück, zusammen mit vielen anderen fruchtlosen Lösungsversuche zu ändern. Bitte helfen Sie mir :(

Thank you!

Answer 1

Sie nicht den Pfosten Körper angegeben haben. Werfen Sie einen Blick in die AngularJS http post Dokumentation für weitere Details.

Answer 2

das Datenobjekt angegeben werden, wie unten

data: { 
 
         username: "demo", 
 
         password: "password" 
 
}

Dies sollte fix Ihre issue.But Sie auth Methode ist nicht ha den Ajax-Anruf. Wenn der Aufruf aufgrund falscher Anmeldeinformationen fehlschlägt, fährt der Controller trotzdem fort und führt User.query aus, was kein erwartetes Verhalten ist.