对静态文件无法正确加载的路由器的相对路径做出反应

Question

我有一个React应用（简单的前端应用），它在生产中位于相对路径上（例如suite.app.com/auth）。其他应用程序则位于不同的路径上。因此，我需要对该应用程序的所有静态文件请求都通过nginx路由到/ auth。基本上，从nginx的角度来看这可以正常工作，但从react的角度来看，我需要相对的路径：

在我的package.json中，我添加了"homepage": "./",

，并且在我的index.html中，我添加了<base href="/auth/">

所以现在当我加载文件时，我可以在浏览器的“网络”标签中看到

这是我所期望的。相对于静态文件。但是，在我加载应用程序时，在服务器日志中可以看到这种情况：

即某物没有将请求传递到正确的路径。 （首先，他们返回200的原因是因为根上有一个不同的应用程序，因此它实际上是在加载其他应用程序文件，而不是此文件。

任何可能在这里发生的提示都是很棒的。

编辑：为两个端点发布Nginx配置。

server {
    listen 80;
    server_name app.site.com;
    add_header 'Referrer-Policy' 'origin';
    location /auth {
        proxy_pass http://authentication.internal.app/;
        proxy_set_header Host authentication.internal.app;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Real-IP $proxy_protocol_addr;
        proxy_set_header X-Forwarded-For $proxy_protocol_addr;
        proxy_set_header X-Forwarded-Proto https;
        proxy_redirect off;
    }
    location / {
        proxy_pass http://dashboard.internal.app/;
        proxy_set_header Host dashboard.internal.app;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Real-IP $proxy_protocol_addr;
        proxy_set_header X-Forwarded-For $proxy_protocol_addr;
        proxy_set_header X-Forwarded-Proto https;
        proxy_redirect off;
    }
}

Answer 1

当您指定proxy_pass指令时，如果您在基本URL的末尾附加任何内容，Nginx将用您添加到{{ 1}} URL。

因此，在您的情况下，您有proxy_pass，然后是location /auth，并带有所有重要的尾部斜杠

因此，对proxy_pass http://authentication.internal.app/的客户端请求与位置块example.com/auth/static/style.css匹配，Nginx丢弃了/auth并将其替换为/auth，现在您的代理正在获取/

如果您删除斜杠以将proxy.server//static/style.css指令更改为proxy_pass，则整个客户端请求URL将传递到代理，因此上述请求将被代理到proxy_pass http://authentication.internal.app。为了达到相反的效果，请将proxy.server/auth/static/style.css的值保持不变，并将location块更改为proxy_pass，Nginx现在将location /auth/替换为/auth/，并且代理请求将变为{ {1}}

出于可读性考虑，我会在配置文件中交换位置指令的顺序，以便第一个条目为/

一个常见的误解是Nginx按照列出的顺序评估位置指令并选择第一个匹配项，但这仅适用于正则表达式定义的位置。

将评估所有前缀匹配项，而与列出的顺序无关，并且Nginx选择最长的匹配前缀位置。现在，将针对所有包含正则表达式的位置块对请求进行评估，这部分的确会按照列出的顺序进行，如果其中任何一个匹配，Nginx都会立即忘记最长的前缀位置，并将请求传递给匹配的正则表达式位置。如果没有匹配项，则最好的前缀匹配项将处理该请求。

通过在位置之前添加proxy.server/static/style.css修饰符，可以阻止Nginx搜索与特定前缀位置匹配的请求的正则表达式匹配。

很明显，当前配置中没有正则表达式位置，所以现在很多都不相关，但是如果您以后沿这条路线走，它并不十分直观，因此也许在某些时候会有所帮助。