反应路由器相对路径到静态文件未正确加载

Question

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

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

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

所以现在当我加载文件时，我可以在浏览器的网络选项卡中看到

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

即某事没有将请求传递到正确的路径。（FWIW 他们返回 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 将替换原始客户端请求中与您的位置匹配的部分 URL用你添加到 proxy_pass URL.

的任何内容来阻止

所以在你的情况下你有 location /auth 然后 proxy_pass http://authentication.internal.app/ 和一个非常重要的尾部斜杠

因此对 example.com/auth/static/style.css 的客户端请求与位置块 /auth 匹配，Nginx 丢弃 /auth 并将其替换为 / 现在您的代理正在获得 proxy.server//static/style.css

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

纯粹为了可读性，我会交换配置文件中位置指令的顺序，以便第一个条目是 location /

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

不管它们列出的顺序如何，都会评估所有前缀匹配项，Nginx 选择最长的匹配前缀位置。请求现在根据包含正则表达式的所有位置块进行评估，这部分确实按照它们列出的顺序发生，如果它们中的任何一个匹配 Nginx 将立即忘记最长的前缀位置并将请求传递到匹配的正则表达式位置。如果 none 匹配，则最佳前缀匹配将处理请求。

您可以通过在位置前添加 ^~ 修饰符来阻止 Nginx 为匹配特定前缀位置的请求搜索正则表达式匹配项。

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

反应路由器相对路径到静态文件未正确加载

react router relative path to static files not loading correctly

javascript

url

relative-path

reactjs

react-router