Angular-BrowerSync-Express无法从客户端快速后端路由POST POST

Question

我正在使用Angular-Gulp-Browsersync-Express应用程序，并且无法获取角度的$ http资源以发布简单的“联系人我们“形式到我的快递服务器。

每次我尝试提交我的形式，我得到以下错误：

POST http://localhost:8080/submitContactUsForm 404 (Not Found) 
Cannot POST /submitContactUsForm 

冲到前面，我有更多的经验，与前端工作比我做的背因此很可能是因为我的服务器设置错误。

这里是我的Express服务器：

'use strict'; 

var express = require('express'); 
var cors = require('cors'); 
var bodyParser = require('body-parser'); 
var http = require('http'); 
var routes = require('.././src/index.module.js'); 
// var contactController = require('.././api/http/controllers/contactcontroller.js'); 

// require database data modeling via mongoose 
var mongoose = require('mongoose'); 

// Express Session allows us to use Cookies to keep track of 
// a user across multiple pages. We also need to be able to load 
// those cookies using the cookie parser 
var session = require('express-session'); 
var cookieParser = require('cookie-parser'); 

// Flash allows us to store quick one-time-use messages 
// between views that are removed once they are used. 
// Useful for error messages. 
var flash = require('connect-flash'); 


// Use express and set it up 
var app = express(); 
app.use(cors()); 
app.set('views', __dirname + '/views'); 
app.use(express.static(__dirname + '/public')); 
app.use(bodyParser.urlencoded({extended: true})); 
app.use(bodyParser.json()); 

app.post('/submitContactUsForm', function(req, res) { 
console.log('it hit the server'); 
}) 

var path = require('path'); 
var gulp = require('gulp'); 
var conf = require('./conf'); 
var browserSync = require('browser-sync').create(); 
var browserSyncSpa = require('browser-sync-spa'); 
var util = require('util'); 
var proxyMiddleware = require('http-proxy-middleware'); 

function browserSyncInit(baseDir, browser) { 
    browser = browser === undefined ? 'default' : browser; 

var routes = null; 
if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) { 
routes = { 
    '/bower_components': 'bower_components' 
    }; 
} 

browserSync.instance = browserSync.init({ 
startPath: '/', 
cors: true, 
browser: browser, 
port: 8080, 
server: { 
    baseDir: baseDir, 
    routes: routes, 
    middleware: function (req, res, next) { 
     res.setHeader('Access-Control-Allow-Origin', '*'); 
     res.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Accept"); 
     res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); 
     next(); 
    } 
    }, 
}); 
} 

browserSync.use(browserSyncSpa({ 
selector: '[ng-app]'// Only needed for angular apps 
})); 

gulp.task('serve', ['setenvconstants','watch'], function() { 
browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]); 
}); 

gulp.task('serve:dist', ['setenvconstants','build'], function() { 
browserSyncInit(conf.paths.dist); 
}); 

gulp.task('serve:e2e', ['inject'], function() { 
browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []); 
}); 

gulp.task('serve:e2e-dist', ['build'], function() { 
browserSyncInit(conf.paths.dist, []); 
}); 

这里是角控制器我尝试后从：

(function() { 
'use strict'; 

angular 
    .module('commonSenseDietApp') 
    .controller('ContactController', ContactController); 


function ContactController($http, $log) { 
    // controllerAs syntax 
    var vm = this; 

vm.contactInfo = { 
    email: vm.email 
} 

vm.processContactForm = function() { 

    return $http.post('/submitContactUsForm', vm.contactInfo) 
     .then(returnSendSuccessful) 
     .catch(sendFail); 

    function returnSendSuccessful(response) { 
    $log.log(response.data); 
    return response.data; 
    } 

    function sendFail(err) { 
    return $log.error(err.data); 
    } 
} 


} 

})(); 

这里是我的客户端路线：

(function() { 
'use strict'; 

angular 
.module('commonSenseDietApp') 
.config(routeConfig); 

function routeConfig($routeProvider) { 
// Home Page 
$routeProvider 
.when('/', { 
    templateUrl: 'app/views/pages/home.html', 
    controller: 'MainController', 
    controllerAs: 'vm' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 

// About Page 
$routeProvider 
.when('/about', { 
    templateUrl: 'app/views/static/about.html' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 

// Terms of Use Page 
$routeProvider 
.when('/terms-of-use', { 
    templateUrl: 'app/views/static/terms-of-use.html' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 

// Privacy Policy Page 
$routeProvider 
.when('/privacy-policy', { 
    templateUrl: 'app/views/static/privacy-policy.html' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 

// Contact Us Page 
$routeProvider 
.when('/contact', { 
    templateUrl: 'app/views/pages/contact.html', 
    controller: 'ContactController', 
    controllerAs: 'vm' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 

// Answer Page 
$routeProvider 
.when('/answer', { 
    templateUrl: 'app/views/pages/answer.html', 
    controller: 'AnswerController', 
    controllerAs: 'vm' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 

// How It Works Page 
$routeProvider 
.when('/how-it-works', { 
    templateUrl: 'app/views/static/how-it-works.html' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 

// Algorithm Explainer Page 
$routeProvider 
.when('/meet-ONNA', { 
    templateUrl: 'app/views/static/meet-ONNA.html' 
}) 
.otherwise({ 
    controller: 'Error404Controller', 
    templateUrl: 'app/views/errors/404.html' 
}); 
} 
})(); 

这是我的联系表格标记：

<section> 
<div class="contact-us-title"> 
    <h1>Contact Us</h1> 
</div> 

<form class="contact-us-form" name="contactUsForm" ng-submit="vm.processContactForm()"> 
    <div class="form-group"> 
     <input placeholder="name" type="text" name="name" ng-model="vm.name" class="form-control" required /> 
     <span class="label label-danger" ng-show="vm.submitted && contact-us-form.name.$error.required">Required!</span> 
    </div> 

    <div class="form-group"> 
     <input placeholder="Email" type="email" name="email" ng-model="vm.email" class="form-control" required /> 
     <span class="label label-danger" ng-show="vm.submitted && contact-us-form.email.$error.required">Required!</span> 
    <span class="label label-danger" ng-show="vm.submitted && contact-us-form.$error.email">Invalid email!</span> 
    </div> 

    <div class="form-group"> 
     <input name="headline" placeholder="Headline" type="text" ng-model="vm.headline" class="form-control" required/> 
     <span class="label label-danger" ng-show="vm.submitted && contact-us-form.headline.$error.required">Required!</span> 
    </div> 

    <div class="form-group"> 
     <textarea name="message" placeholder="Message" type="textbox" ng-model="vm.message" class="form-control" required></textarea> 
     <span class="label label-danger" ng-show="vm.submitted && contact-us-form.subjectList.$error.required">Required!</span> 
    </div> 


    <input type="submit" id="submit-contact-form-btn"> 
    </form> 
</section> 

我也没有看到任何记录到终端的控制台。任何有关这方面的见解都会非常有用，并且非常感谢。

Answer 1

尤里卡我找到了答案！

我发现我缺乏使用browersync进行快速播放的经验，这对我来说无疑是一个障碍。答案在于使用Proxying浏览器同步来表达和使用gulp-nodemon包。一些改制后，我得到了正确的设置：

我的浏览器同步服务器和初始化一饮而尽任务：

'use strict'; 

var path = require('path'); 
var port = process.env.PORT || 8080; 
var gulp = require('gulp'); 
var conf = require('./conf'); 
var browserSync = require('browser-sync').create(); 
var browserSyncSpa = require('browser-sync-spa'); 
var util = require('util'); 
var proxyMiddleware = require('http-proxy-middleware'); 
var nodemon = require('gulp-nodemon'); 
var reload = browserSync.reload; 

function browserSyncInit(baseDir, browser) { 

var routes = null; 
if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) { 
    routes = { 
    '/bower_components': 'bower_components' 
    }; 
} 

browserSync.instance = browserSync.init({ 
    startPath: '/', 
    cors: true, 
    browser: browser = browser === undefined ? 'default' : browser, 
    proxy: 'http://localhost:8081', 
    port: port 
// https: true 
}); 
} 

browserSync.use(browserSyncSpa({ 
selector: '[ng-app]' // Only needed for angular apps 
})); 

// Run Gulp tasks 
gulp.task('serve', ['browser-sync','setenvconstants','watch']); 

gulp.task('browser-sync', ['nodemon'], function() { 
browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]); 
}); 
gulp.task('serve:dist', ['setenvconstants','build'], function() { 
browserSyncInit(conf.paths.dist); 
}); 
gulp.task('serve:e2e', ['inject'], function() { 
browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []); 
}); 
gulp.task('serve:e2e-dist', ['build'], function() { 
browserSyncInit(conf.paths.dist, []); 
}); 
gulp.task('nodemon', [], function(done) { 
var running = false; 

return nodemon({ 
    script: 'api/app.js', 
    watch: ['api/**/*.*', 'src/**/*.*'] 
}) 
.on('start',function() { 
    if (!running) { 
    done(); 
    } 
    running = true; 
}) 
.on('restart', function() { 
    setTimeout(function(){ 
    reload(); 
    }, 500); 
}); 
}); 

我的Express服务器：

var express = require('express'); 
var bodyParser = require('body-parser'); 
var http = require('http'); 
var port = process.env.PORT || 8081; 
var cors = require('cors'); 
var path = require('path'); 
var publicRoutes = require('./http/routes/web.js'); 

// require database data modeling via mongoose 
var mongoose = require('mongoose'); 

// Express Session allows us to use Cookies to keep track of 
// a user across multiple pages. We also need to be able to load 
// those cookies using the cookie parser 
var session = require('express-session'); 
var cookieParser = require('cookie-parser'); 

// Flash allows us to store quick one-time-use messages 
// between views that are removed once they are used. 
// Useful for error messages. 
var flash = require('connect-flash'); 

// Use Express and set it up 
var app = express(); 
app.use(bodyParser.urlencoded({extended: true})); 
// Parse requests to JSON 
app.use(bodyParser.json({type: '*/*', limit: '50mb'})); 
// set Jade as the view engine 
app.set('view engine', 'jade'); 
// tell server where to find our views 
app.set('views', __dirname + '/.././src/app/views'); 
// make sure bower components are installed. 
app.use('/underscore', express.static(path.resolve('.././node_modules/underscore'))); 
// tell our server where to find static assets depending on the environment. 
process.env.NODE_ENV == 'production' ? app.use(express.static(path.join(__dirname + '/../..'))) : app.use(express.static(path.join(__dirname + '/.././dist'))); 
// enable cors 
app.use(cors({ 
"origin": "*", 
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE", 
"allowedHeaders": ["Origin, X-Requested-With, Content-Type, Accept, Authorization"], 
"preflightContinue": false 
})); 

// Pull in our public routes 
app.use('/api', publicRoutes); 

// Listen 
app.listen(port, function(error) { 
if (error) { 
    console.error(error); 
} else { 
    console.info("==> Listening on port %s. Visit http://localhost:%s/ in your browser.", port, port); 
} 
}); 

我现在可以到$ http.post从我的角控制器考虑在我的快递服务器的路由前缀：

vm.processContactForm = function() { 

    return $http.post('/api/submitContactUsForm', vm.contactInfo) 
     .then(returnSendSuccessful) 
     .catch(sendFail); 

    function returnSendSuccessful(response) { 
    $log.log(response); 
    // return response.data; 
    } 

    function sendFail(err) { 
    return $log.error(err.data); 
    } 
} 

唯一的问题我'现在有m是与...

process.env.NODE_ENV == 'production' ? app.use(express.static(path.join(__dirname + '/.././src'))) : app.use(express.static(path.join(__dirname + '/.././dist'))); 

其中“/ DIST”供应得很好，但“/ src”中仅提供一个空白的index.html页到我的本地主机。我会将此作为一个新问题发布，并考虑解决此问题。谢谢您的帮助！