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

Posted 2023-03-05

【中文标题】如何将所有 Angular 请求重定向到 Nginx 中的 index.html

【英文标题】：How to redirect all Angular request to index.html in Nginx

【发布时间】：2016-05-04 10:49:58

【问题描述】：

我已经创建了一个简单的 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 答案中所述。但我无法根据所有请求进行类似的工作。

我们将不胜感激。

【参考方案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（仅举一个例子）

【参考方案2】：

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

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

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

【讨论】：

不幸的是，这不起作用。当我尝试重新加载页面或点击链接时，我得到了 404

这个行得通，他可能只需要重启nginx。

我想说你最后也需要 =404，作为最后的后备

@redfox05 Try_files 只能接受一个默认操作作为最后一个参数。使用响应代码或 URI，而不是同时使用两者。请参阅添加到我的答案中的链接。

我想你误解了我的意思。最后的 =404 是最后的后备。它将依次尝试每个选项，如果成功则不再进一步。最好用一个例子来解释。我会添加它作为答案。