使用 AngularJS $http.post 表示服务器状态 404 错误答案

【问题标题】：Express server status 404 error with AngularJS $http.post使用 AngularJS $http.post 表示服务器状态 404 错误
【发布时间】：2023-03-31 20:25:01
【问题描述】：

所以我第一次使用 yeoman 和 grunt 为我的 express 服务器和我的 angular 前端设置了单独的端口。这也是我第一次尝试使用这种客户端/服务器结构的 Web 项目，但我碰壁了。

我在 localhost:9000/signup 下的前端有一个注册表单，当我点击提交时，我得到以下回复

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

第一行是我将表单的结果打印回浏览器控制台。其次是 /signup 上的 404，我不确定这是快速路由还是客户端 /signup？

这是我的 signup.js，它位于 express 的 /routes 文件夹中

// 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 文件夹，它是 /signup 表单的控制器。

'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);
  });
}
  });

我被官方难住了，希望得到一些见解 - 非常感谢任何帮助。

【问题讨论】：

快递在哪个端口上运行？

标签： angularjs node.js express

【解决方案1】：

问题是您要发布到 localhost:9000/signup，这是前端，但前端不支持该路由的 post 方法。您需要将请求发送到 localhost:{YOUR_EXPRESS_SERVER_PORT}/signup。

改变这个 $http.post('/signup', user) 至 $http.post('http://localhost:{YOUR_EXPRESS_SERVER_PORT}/signup', user)

【讨论】：