使用 AngularJS 和外部 NodeJS 服务器启用 html5 模式
Posted
技术标签:
【中文标题】使用 AngularJS 和外部 NodeJS 服务器启用 html5 模式【英文标题】：Enabling html5 mode with AngularJS and a external NodeJS server 【发布时间】：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。
【参考方案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 的成本真的很低。以上是关于使用 AngularJS 和外部 NodeJS 服务器启用 html5 模式的主要内容，如果未能解决你的问题，请参考以下文章
如何使用stormpath使angularjs调用nodejs api和auth
如何将实时数据从 nodejs 服务器推送到 AngularJS？
在哪里以及如何将 nodejs 与 angularjs 一起使用