如何将所有 Angular 请求重定向到 Nginx 中的 index.html

Question

我已经创建了一个简单的 Nginx 配置文件来像这样为 Angular 提供服务：

server {
  listen 80;
  listen [::]:80;

  root /path/to/apps/myapp/current/dist;
  access_log /path/to/apps/myapp/current/log/nginx.access.log;
  error_log /path/to/apps/myapp/current/log/nginx.error.log info;

  index index.html;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location / {
    try_files $uri $uri/ =404;
  }
}

一切正常。因为我使用的是Angular UI Router，所以我想将所有页面转发到index.html，这样Angular就会接管（所以对example.com/users/new的请求将由Nginx重定向到index.html，以便Angular UI处理它) 用于页面重新加载、链接等。

我怎样才能做到这一点？

我玩过以下选项：

server {
    #implemented by default, change if you need different ip or port
    #listen *:80 | *:8000;
    server_name test.com;
    return 301 $scheme://www.test.com$request_uri;
}

如this 答案中所述。但我无法根据所有请求进行类似的工作。

我们将不胜感激。

Answer 1

你几乎得到它。 try_files 是正确使用的文件，正如 Richard 所示，您只需将 index.html 添加到列表中。不过后面的=404就不用去掉了，其实最好不要去掉。

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

实施上述更改后，使用 sudo nginx -s reload

重新加载配置

• $uri 会将请求作为文件尝试，如果失败，它会移动到 下一个。
• $uri/ 将尝试请求作为文件夹 /index.html 将 然后尝试，它将所有请求发送到您的 index.html 角度应用程序将能够路由事物（还要确保您使用 html5mode 避免在 url 中使用 #。
• =404 将是您的最终后备方案，基本上是说：我已经将其作为文件、文件夹和通过 index.html 进行了尝试。如果 index.html 失败/没有 无论出于何种原因存在，我们都会提供 404 错误。

为什么 =404？

如果一切顺利，最后一个永远不会使用，并且路由只会尝试文件、文件夹、角度应用程序。就是这样。但我认为将 =404 放在末尾以涵盖所有基础是一种很好的做法。

关于 index.html 的重要说明

无论您是否在 try_files 中使用 =404，通过将所有内容定向到 index.html，您基本上都无法从您的网络服务器提供 404 错误，除非 index.html 不存在（这就是 @987654325 @ 进来）。这意味着您将需要在 Angular JS 中处理“未找到”的 url 和丢失的页面，并且您需要接受您使用的错误页面将返回 HTTP 200 响应而不是 404 的事实。（这是因为在您指向 index.html 的那一刻，您已经向用户提供了一个页面，因此是 200)。

为了更加放心，谷歌 try_files angular js 你会发现大多数例子都包含 =404。

参考资料：

• http://nginx.org/en/docs/beginners_guide.html#control
• http://ajbogh.blogspot.ca/2015/05/setting-up-angularjs-html5-mode-in.html（仅举一个例子）

Answer 2

您需要将路由器添加到 try_files 指令的末尾，如下所示：

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

请参阅this document 了解更多信息。