AngularJS $http.post() returns 404

Question

我一直在尝试通过 Shiva Adhikari 的教程 "CRUD app with AngularJs, Node js, express js, Bootstrap, EJS, MySQL" 来学习，当我意识到我被困在教程的第 5 部分时。

我的问题

在提交创建产品分类的表单时，浏览器控制台报如下错误

我提交表单时调用的代码

angular.module("productCategoryModule")
  .factory("productCategoryService", productCategoryService);

productCategoryService.$inject = ['$http'];

function productCategoryService($http) {
  return {

    createProductCategory: function(productCategory) {

      return $http.post('/createProductCategory', {
        categoryName: productCategory.categoryName,
        categoryDetails: productCategory.categoryDetails
      });

      /* return $http({
             method: 'POST',
             url: '/createProductCategory',
             data: {
                   'categoryName' : productCategory.categoryName,
                   'categoryDetails' : productCategory.categoryDetails
               },
             headers: {'Content-Type': 'application/x-www-form-urlencoded'}
         });*/
    },

    getAllProductCategories: function() {
      return $http.get('/getAllProductCategory');
    }

  };
}

html代码

<% include layout %>

  <div class="panel panel-info">
    <div class="panel-heading">
      <h1 class="panel-title"> <%=title %></h1>
    </div>

    <div class="panel-body">
      <div class="container" data-ng-cloak data-ng-app="productCategoryModule" data-ng-controller="productCategoryController">

        <form class="navbar-form navbar-left" role="search" method="post" name="formProductCategory">
          <div class="row">
            <div class="form-group">
              <label for="productCategory">Product Category Name</label>
              &nbsp;&nbsp;

              <input type="text" class="form-control" placeholder="Please Enter Product Category" name="productCategory" id="productCategory" ng-model="productCategory.categoryName" style="width:100%" required>
            </div>
          </div>
          <div class="row">
            <div class="form-group">
              <label for="productDetails">Product Category Details</label>
              <textarea class="form-control" placeholder="Please Enter Product Category Details" name="productDetails" id="productDetails" rows="5" cols="30" ng-model="productCategory.categoryDetails" style="width:100%" required></textarea>
            </div>
          </div>
          <div>&nbsp;</div>
          <div class="row">
            <div class="form-group" style="padding-left:40%;">
              <button type="button" class="btn btn-primary" ng-click="createProductCategory(productCategory)">Create Product Category</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="/bower_components/angular/angular.js"></script>
  <script src="../../js/app/productCategory/productCategoryModule.js"></script>
  <script src="../../js/app/productCategory/productCategoryService.js"></script>
  <script src="../../js/app/productCategory/productCategoryController.js" </script>

productCategoryRouteConfigurator.js

function productCategoryRouteConfig(app) {
    this.app = app;
    this.routeTable = [];
    this.init();
}

productCategoryRouteConfig.prototype.init = function () {
    var self = this;

    this.addRoutes();
    this.processRoutes()
}

productCategoryRouteConfig.prototype.processRoutes = function () {
    var self = this;

    self.routeTable.forEach(function (route) {
        if (route.requestType == 'get') {
            self.app.get(route.requestUrl, route.callbackFunction);
        } else if (route.requestType == 'post') {
            self.app.get(route.requestUrl, route.callbackFunction);
        } else if (route.requestType == 'delete') {

        }
    })
}

productCategoryRouteConfig.prototype.addRoutes = function () {
    var self = this;

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/createProductCategory',
        callbackFunction: function (request, response) {
            response.render('createProductCategory', {
                title: "Create a Product Category"
            });
        }
    });

    self.routeTable.push({
        requestType: 'post',
        requestUrl: '/createProductCategory',
        callbackFunction: function (request, response) {
            var productCategoryDao = require('../model/dao/productCategoryDao.js');
            console.log(request.body)

            productCategoryDao.productCategoryDao.createProductCategory(request.body, function (status) {
                response.json(status);
                console.log(status);
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/viewProductCategory',
        callbackFunction: function (request, response) {
            response.render('viewProductCategory', {
                title: "View Product Category"
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/createProduct',
        callbackFunction: function (request, response) {
            response.render('createProduct', {
                title: "Create a Product"
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/viewProduct',
        callbackFunction: function (request, response) {
            response.render('viewProduct', {
                title: "View a Product"
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/getAllProductCategory',
        callbackFunction: function (request, response) {
            var productCategoryDao = require('../model/dao/productCategoryDao.js');

            productCategoryDao.productCategoryDao.getAllProductCategory (function (productCategories) {
                console.log(productCategories);
                response.json({ productCategories : productCategories })
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/editProductCategory/:productCategoryId',
        callbackFunction: function (request, response) {
            response.render('editProductCategory', {
                title: "Edit Product Category"
            });
        }
    });
}

module.exports = productCategoryRouteConfig;

我已经尝试了 $http 的实现和 CORS 解决方案。

在创建此问题之前参考了以下帖子和建议的帖子，因为它们没有解决我的问题： SO post 1, SO post 2, SO post 3, SO post 4

Answer 1

我收到的错误是由于 productCategoryRouteConfigurator.js

中的轻微配置错误造成的

我用过

else if (route.requestType == 'post') {
    self.app.get(route.requestUrl, route.callbackFunction);
}

而不是

else if (route.requestType == 'post') {
    self.app.post(route.requestUrl, route.callbackFunction);
}

这解决了我的问题。

感谢@redA 指出路由文件中可能存在问题。

AngularJS $http.post() returns 404

AngularJS $http.post() returns 404

node.js

angularjs

angularjs-http