Angular-BrowerSync-Express无法从客户端Express后端路由进行POST

时间：2016-12-27 00:46:45

标签： javascript angularjs express gulp browser-sync

我正在使用Angular-Gulp-Browsersync-Express应用程序而且我无法获得有角度的$ http资源来发布一个简单的＆＃34;联系我们＆＃34;形成我的快递服务器。

每当我尝试提交表单时，都会收到以下错误：

glm::perspective

要提前做好准备，我在使用前端方面比使用后端方面有更多的经验，所以很可能是因为我的服务器设置错误了。

这是我的Express Server：

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

以下是我试图发布的Angular Controller：

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

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

1 个答案:

答案 0 :(得分：0)

尤里卡我找到了答案！

结果表明我缺乏经验，表达对眉毛的表现很好，这对我来说无疑是一个障碍。答案在Proxying browsersync中表达并表达gulp-nodemon包的使用。经过一些重组后，我得到了正确的设置：

我的浏览器 - 同步服务器和gulp init任务：

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

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

我现在可以从我的Angular控制器获取$ 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);
  }
}

我现在唯一的问题是...... 

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

其中＆＃39; / dist＆＃39;服务很好但是＆＃39; / src＆＃39;仅为我的localhost提供空白的index.html页面。我将这个问题发布为一个新问题，并认为这个问题已经解决了。谢谢你的帮助！

相关问题
最新问题