快速服務器狀態404錯誤與AngularJS $ http.post

因此，我已設置單獨的端口爲我的快遞服務器和角度前端，第一次使用yeoman和grunt。這也是我第一次嘗試使用這種客戶機/服務器結構的Web項目，並且我遇到了困難。

我在我的下本地主機前端的註冊表格：9000 /註冊，當我點擊提交，我得到以下回到

{firstname: "test", lastname: "test", email: "test", password1: "test", password2: "test"} 
angular.js:12759 POST http://localhost:9000/signup 404 (Not Found) 

(anonymous) @ angular.js:12759 
sendReq @ angular.js:12492 
serverRequest @ angular.js:12244 
processQueue @ angular.js:17051 
(anonymous) @ angular.js:17095 
$digest @ angular.js:18233 
$apply @ angular.js:18531 
(anonymous) @ angular.js:27346 
dispatch @ jquery.js:5206 
elemData.handle @ jquery.js:5014 
angular.js:14700 Possibly unhandled rejection: {"data":"Cannot POST  /signup\n","status":404,"config": 
{"method":"POST","transformRequest":   
[null],"transformResponse:[null],"jsonpCallbackParam":"callback","url":"/signup","data": 
{"firstname":"test","lastname":"test","email":"test","password1":"test", 
"password2":"test"},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}} 
,"statusText":"Not Found","xhrStatus":"complete"}

第一行我打印形式的結果返回給瀏覽器控制檯。其次是404開/註冊，我不確定這是快遞路線還是客戶/註冊？

這裏是我的signup.js是位於/路由文件夾中明確

// Include Express 
var express = require('express'); 
// Initialize the Router 
var router = express.Router(); 

// Setup the Route 
router.post('/', function (req, res) { 

// show the request body in the command line 
console.log(req.body); 

// return a json response to angular 
res.json({ 
    'msg': 'success!' 
}); 
}); 

// Expose the module 
module.exports = router;

而且我已經包括它在快遞我app.js文件，

var signup = require('./routes/signup'); 
... 
app.use('/signup', signup);

阿卜杜勒終於我signup.js文件夾，它是/註冊表單的控制器。

'use strict'; 

angular.module('clientApp') // make sure this is set to whatever it is in your client/scripts/app.js 
    .controller('SignupCtrl', function ($scope, $http) { // note the added $http depedency 

    // Here we're creating some local references 
    // so that we don't have to type $scope every 
    // damn time 
    var user, 
     signup; 

    // Here we're creating a scope for our Signup page. 
    // This will hold our data and methods for this page. 
    $scope.signup = signup = {}; 

    // In our signup.html, we'll be using the ng-model 
    // attribute to populate this object. 
    signup.user = user = {}; 

    // This is our method that will post to our server. 
    signup.submit = function() { 

     // make sure all fields are filled out... 
     // aren't you glad you're not typing out 
     // $scope.signup.user.firstname everytime now?? 
     if (
     !user.firstname || 
     !user.lastname || 
     !user.email || 
     !user.password1 || 
     !user.password2 
    ) { 
     alert('Please fill out all form fields.'); 
     return false; 
     } 

     // make sure the passwords match match 
     if (user.password1 !== user.password2) { 
     alert('Your passwords must match.'); 
     return false; 
     } 

     // Just so we can confirm that the bindings are working 
     console.log(user); 


    $http.post('/signup', user) 
    .then(function(response) { 
     console.log(response.data); 
    }); 
} 
    });

我正式難倒了，並會喜歡一些見解 - 任何幫助，非常感謝。

來源

2017-08-29 tspoon

？ – yBrodsky