AngularJS $ http.post（）返回404

我一直在尝试通过Shiva Adhikari的教程“AngularJs，Node js，Express js，Bootstrap，EJS，MySQL的CRUD应用程序”学习，当时我意识到自己被困在教程的第5部分。

我的问题

提交表单以创build产品类别时，浏览器控制台会报告以下错误

我的代码在表单提交时被调用

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解决scheme。

以下的post和build议的post在创build这个问题之前被提及，因为他们没有解决我的问题： SO 1 ， SO 2 ， SO 3 ， SO 4

Answer 1

我得到的错误是由于在我的productCategoryRouteConfigurator.js轻微misconfiguration

我用了

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

代替

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

这已经解决了我的问题。

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