Express 4、NodeJS、AngularJS 路由 [英] Express 4, NodeJS, AngularJS routing

问题描述

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

I am using Express 4 to host my AngularJS app on my backend, with Nginx as my frontend server. However html5 mode does not seem to work, as I will get a Cannot /GET error when I try to enter the page link (e.g. http://localhost/login) via the browser. Is there any routing configuration I need to do for my Express/Nginx? Here's my config code:

快递 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 加载所有其他部分.

I'm assuming you are using a "single page" angular app, so one html page that uses ng-view to load all the other partials.

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

In this case you need to do something like this:

快递 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"设置了路由，它们也需要加载.因此，服务器尝试为无法返回 404 的路由/login"找到匹配项.在单页角度应用程序的情况下，您在路由中使用的所有路由都必须被路由捕获，app.get('/*', ... 在这种情况下，然后返回主 angular.js html 页面.请注意，这是最后一次调用，因此将最后评估，如果您将其放在首位将阻止所有后续规则运行，因为 express 只是运行它遇到的第一个规则的处理程序.

The problem you're facing is that even though you have routes setup for '/login' before the routes are fired they need to be loaded. So the server tries to find a match for the route '/login' which it can't returning the 404. In the case of single page angular apps all the routes you use in routing must be caught by a route, app.get('/*', ... in this case, and then return the main angular.js html page. Note that this is the last call so it will be evaluated last, if you put it first it will prevent all the subsequent rules from running as express just runs the handler for the first rule it encounters.

这篇关于Express 4、NodeJS、AngularJS 路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！