node.js – Express 4,NodeJS,AngularJS路由

我使用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;
  }
}

解决方法

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

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

快递4：

var express = require('express'),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,server.address().port);
});

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