时间戳

首页 > 解决方案 > AngularJS + Nginx 所以 404 返回 404 直接子路由访问返回 AngularJS 索引文件

angularjs - AngularJS + Nginx 所以 404 返回 404 直接子路由访问返回 AngularJS 索引文件

问题描述

一段时间以来，我一直在努力寻找解决方案，但到目前为止还没有运气。所以在这里我在 Stackoverflow 上提问，希望能得到一些问题的解答。

我有一个 AngularJS 应用程序和一个 Angular 应用程序。它们都需要使用一个 Nginx 配置从一个 Docker 提供服务。这是我迄今为止在 Nginx 配置方面所拥有的

server {
    listen 0.0.0.0:80;
    root /usr/share/nginx/html;

    location ^~ /legacy/ {
        add_header Cache-Control no-cache;

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

    location / {
        add_header Cache-Control no-cache;

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

这/legacy条路线是所有 AngularJS 东西所在的地方。所以通常当用户访问我的网站时，他们应该被带到 Angular 应用程序。但是，如果他们明确地访问/legacyURL，他们将获得 AngularJS 应用程序。听起来很简单，但是由于我对 Nginx 缺乏了解，我一直无法做到这一点。

现在，/legacy将我带到正确的index.html文件，但该文件正在尝试加载不存在的资产（顺便说一句，我无法编辑任何遗留代码，因此删除该资产是不可能的），在这种情况下，而不是返回 404 Nginx 返回index.html自己。try_files由于指令，这是有道理的。所以我尝试删除try_files指令，并简单地依赖于autoindex on当用户只访问/legacyurl 时哪个工作正常。当用户直接尝试访问遗留的子路由（例如/legacy/home.

所以我的问题是，我需要在 Nginx 配置方面进行哪些更改，以便丢失的资产只会抛出 404 并且当用户直接尝试访问任何遗留的子路由（即/legacy/home）时，它会index.html从遗留目录返回。

标签： angularjsdockernginx

解决方案

/legacy正如@Richard 在评论中所建议的那样，我可以通过在位置块顶部添加一个新的位置路线来实现这一点。我还根据自己的需要进行了一些更改。这是我目前使用的最终配置。

server {
    keepalive_timeout 300s;
    listen 0.0.0.0:80;
    root /usr/share/nginx/html;

    port_in_redirect off;

    location ~* \.(jpg|jpeg|gif|css|png|js|ico|json|xml|txt) {
    }

    location ~ ^/legacy(?:/(.*))?$ {
        add_header Cache-Control no-cache;
        try_files $uri $uri/ /index.html =404;
    }

    location / {
        add_header Cache-Control no-cache;
        try_files $uri $uri/ $uri.html /index.html =404;
    }
}

推荐阅读