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

Enabling html5 mode with AngularJS and a external NodeJS server

本文关键字：启用 html5 模式 服务器 NodeJS AngularJS 外部 使用      更新时间：2023-09-26

所以我几乎读过这个主题的每一个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" />

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

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应用程序

当你说你不提供静态文件时，你是在说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;
  }
}
相关文章：