使用 AngularJS 和外部 NodeJS 服务器启用 html5 模式答案

【问题标题】：Enabling html5 mode with AngularJS and a external NodeJS server使用 AngularJS 和外部 NodeJS 服务器启用 html5 模式
【发布时间】：2016-04-18 02:46:29
【问题描述】：

所以我已经阅读了该主题的几乎所有 SO 答案/问题，但我仍然有很多问题。

首先，问题：

我有一个启用了 html5 的 AngularJS 应用，所以我可以去掉“#”号。

$locationProvider.html5Mode({ enabled: true, requireBase: true });
$locationProvider.hashPrefix('!');

这是我的 index.html 中的重要部分：

<!DOCTYPE html>
<html ng-app="application" ng-controller="ApplicationController as app">
  <head>
    <meta name="fragment" content="!">

    <title>LivingRoomArt</title>

    <meta charset="UTF-8">
    <base href="/index.html" />

我正在与使用 express 的 NodeJS 服务器通信：

router.route('/events')
  .post(authController.isAuthenticated, eventController.postEvent)
  .get(eventController.getEvents);

// Register all our routes with /api
app.use('/api', router);

// Start the server
app.listen(process.env.PORT || 5000);

所以，常见的问题：

重新加载后，我从服务器收到 404。我在这里得到了这个概念，到处都是建议的解决方案：

  // This route deals enables HTML5Mode by forwarding missing files to the index.html
  app.all('/*', function(req, res) {
    res.sendfile('index.html');
  });
});

问题是，我的服务器上没有 index.html 文件，也没有我想在我的服务器上复制它。

那么我如何告诉 Node 正确处理请求而不在我的服务器上存储 html 文件？

如果有帮助，我将在 Heroku 上托管 Node 应用程序。

【问题讨论】：

所以你有一个客户端服务器和一个 API 服务器，对吧？ 404 错误在客户端服务器上处理？
嗯，现在无处可去 :) 但我可以在客户端处理它，是的。我有一个 API 服务器和一个静态服务器用于我的客户端（html、js 等）
然后呢？我需要访问子视图并在那里进行 AJAX 调用。
你怎么没有索引？ ng-app 将如何加载？你肯定有一个起点，为什么不使用它呢？ res.sendFile('file'); // res.render('file');
好吧，阅读问题。我的前端（Angular）在单独的静态服务器上，NodeJS 应用程序在不同的服务器上运行（托管在 heroku 上）。我不提供静态文件。我的起点是一个 index.html 文件，它只是让 Ajax 调用一个 REST Api。

标签： javascript angularjs node.js html heroku

【解决方案1】：

当你说你不提供静态文件时，你是在说 node.js API 不对？

我猜你最终会得到两个不同的 url，我们称它们为 http://api.com 和 http://client.com。

我不明白为什么您的 API 应该处理 404。您是否在浏览器中加载 http://api.com 并期待您的 index.html？如果这确实是您的用例，我建议您在 API 中声明一个简单的路由，例如：

app.all('/*', function (req, res) {
   res.redirect('http://client.com');
});

这会将您之前的路线声明未捕获的所有请求重定向到您的客户网站。

那么，有两种选择：

如果为您的静态文件提供服务的服务器是另一个使用 express 的 Node.Js 服务器，您可以完美地执行sendfile，因为您现在可以访问index.html

如果您使用 Nginx（如果您不使用，我强烈建议您使用）进行静态分析，您可以进行这样的配置以将所有失败的请求（丢失的文件/路由）重定向到 index.html

server {
  listen 80;

  root /app/www;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

【讨论】：

我明天试试。现在就读这个，但我可以回答一个问题：api.com 没有返回 index.html，它只返回空白。这是一个纯 REST api。也许这会稍微改变答案？对于 nginx。不，我没有。您能推荐一项服务吗？
嗯，是的，你的 api 没有返回索引是完全正常的，我只是问你是否想用它做一些特别的事情。所以你目前正在使用节点来提供你的静态文件？是的，我会推荐一些 amazon web services，您可以在其中设置 nginx 或专用服务器，但 aws 的成本真的很低。