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

Question

So I've read almost every SO answer/question to this topic, but still I have many questions in my head. 所以我已经阅读了几乎所有关于这个主题的答案/问题，但我脑子里还有很多问题。

First, the problem: 一，问题：

I have an AngularJS app with html5 enabled, so I can get rid of the '#' sign. 我有一个启用了html5的AngularJS应用程序，所以我可以摆脱'＃'符号。

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

This is the important part in my index.html : 这是我的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" />

I am communicating with a NodeJS server which is using express: 我正在使用正在使用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);

So, the usual problem: 所以，通常的问题：

After reloading, I am getting an 404 from the server. 重新加载后，我从服务器获得404。 I get the concept of this here, the suggested solution everywhere: 我在这里得到了这个概念，到处都是建议的解决方案：

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

The thing is, I don't have an index.html file on my server, neither do I want to duplicate it on my server. 问题是，我的服务器上没有index.html文件，也不想在我的服务器上复制它。

So how do I tell Node to handle requests properly without storing html-files on my server? 那么如何在不在我的服务器上存储html文件的情况下告诉Node正确处理请求？

I am hosting the Node app on Heroku, if this helps. 我正在Heroku上托管Node应用程序，如果这有帮助的话。

Answer 1

When you say you don't serve static files, you're saying that the node.js API isn't right? 当你说你不提供静态文件时，你是说node.js API不对吗？

I guess you end up with two distinct urls, let's call them http://api.com and http://client.com . 我想你最终得到了两个截然不同的网址，让我们称之为http://api.com和http://client.com 。

I don't understand why your API should handle the 404. Do you load http://api.com in your browser and expecting your index.html ? 我不明白为什么你的API应该处理404.你在浏览器中加载http://api.com并期待你的index.html吗？ If it's really your use-case, I would advice a simple routing to declare in your API like: 如果它确实是你的用例，我建议在你的API中声明一个简单的路由，如：

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

Which will redirect all requests not catched by your previous routes declaration to your client website. 这会将您之前路线声明未捕获的所有请求重定向到您的客户网站。

Then, there is two options: 然后，有两种选择：

If the server that serves your static files is another Node.Js server using express, you could perfectly do the sendfile , since you now have access to the index.html 如果服务于您的静态文件的服务器是使用express的另一个Node.Js服务器，那么您可以完美地执行sendfile ，因为您现在可以访问index.html

If you're using Nginx, (which I strongly recommend if you don't) for the statics, you could do a configuration like this to redirect all failed requests (missing files / routes) to the index.html 如果您正在使用Nginx（我强烈推荐，如果您不这样做）静态，您可以执行这样的配置，将所有失败的请求（丢失的文件/路由）重定向到index.html

server {
  listen 80;

  root /app/www;
  index index.html;

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-16 15:06:24

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-16 15:06:24

解决方案1
1 已采纳 2016-01-16 15:06:24