Express 4,NodeJS,AngularJS路由

Question

我使用Express 4在我的后端托管我的AngularJS应用程序,Nginx作为我的前端服务器.但是html5模式似乎不起作用,因为当我尝试http://localhost/login通过浏览器输入页面链接(例如)时,我将收到Can not/GET错误.我需要为Express/Nginx做任何路由配置吗？这是我的配置代码:

快递4:

var express = require('express'),
    app = express(),
    server = require('http').Server(app),
    bodyParser = require('body-parser'),
    db = require('./db'),
    io = require('./sockets').listen(server),
    apiRoutes = require('./routes/api'),
    webRoutes = require('./routes/web');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use('/api', apiRoutes);
app.use(express.static(__dirname + '/public'));

server.listen(3000, function() {
  console.log('Listening on port %d', server.address().port);
});

AngularJS:

'use strict';
var nodeApp = angular.module('nodeApp',['ngRoute']);

nodeApp.config(function($routeProvider, $locationProvider, $controllerProvider) {
  $routeProvider.when('/', {
    templateUrl: 'partials/home.html'
  }).when('/login', {
    templateUrl: 'partials/login.html'
  });
  $locationProvider.html5Mode(true);

  nodeApp.controllerProvider = $controllerProvider;
});

Nginx的:

# the IP(s) on which your server is running
upstream test-app {
  server 127.0.0.1:3000;
}

# the nginx server instance
server {
  listen 0.0.0.0:80;
  server_name test-app.cloudapp.net;
  access_log /var/log/nginx/test-app.log;

  # pass the request to the nodejs server with correct headers
  location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;

    proxy_pass http://test-app/;
    proxy_redirect off;
  }
}

Answer 1

我假设您正在使用"单页"角度应用程序,因此一个html页面使用ng-view加载所有其他部分.

在这种情况下,您需要执行以下操作:

快递4:

var express = require('express'),
    app = express(),
    server = require('http').Server(app),
    bodyParser = require('body-parser'),
    db = require('./db'),
    io = require('./sockets').listen(server),
    apiRoutes = require('./routes/api'),
    webRoutes = require('./routes/web');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use('/api', apiRoutes);
app.use(express.static(__dirname + '/public'));
// Here's the new code:
app.use('/*', function(req, res){
  res.sendfile(__dirname + '/public/index.html');
});

server.listen(3000, function() {
  console.log('Listening on port %d', server.address().port);
});

您遇到的问题是,即使您在路由被触发之前设置了'/ login'路由,也需要加载它们.因此,服务器尝试找到路由'/ login'的匹配,它无法返回404.在单页角度应用的情况下,您在路由中使用的所有路由必须被路由捕获,app.get('/*', ...在这种情况下,然后返回主angular.js html页面.请注意,这是最后一次调用,所以它最后会被评估,如果你把它放在第一位,它会阻止所有后续规则运行,因为它只运行它遇到的第一个规则的处理程序.