Javascript 对未正确加载静态文件的路由器相对路径作出反应_Javascript_Reactjs_Url_React Router_Relative Path

Javascript 对未正确加载静态文件的路由器相对路径作出反应

javascript reactjs url

Javascript 对未正确加载静态文件的路由器相对路径作出反应,javascript,reactjs,url,react-router,relative-path,Javascript,Reactjs,Url,React Router,Relative Path,我有一个react应用程序（简单的前端应用程序），它在生产中处于相对路径（例如suite.app.com/auth）。其他应用程序位于不同的路径上。因此，我需要通过nginx将此应用程序的所有静态文件请求路由到/auth。基本上，从nginx的角度来看，这很好，但从react的角度来看，我需要路径是相对的：在my package.json中，我添加了“主页”：“/”，在我的index.html中，我添加了现在，当我加载文件时，我可以在浏览器的“网络”选项卡中看到这正是我所期望的。静态文

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

在my package.json中，我添加了

“主页”：“/”，

在我的index.html中，我添加了

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

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

也就是说，某些东西没有将请求传递到正确的路径。（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;
    }
}

当您指定

proxy_-pass

指令时，如果您在基本URL末尾附加任何内容，Nginx将用添加到

proxy_-pass

URL的内容替换原始客户端请求URL中与您的位置块相匹配的部分

因此，在您的情况下，您有

location/auth

，然后是

proxy\u passhttp://authentication.internal.app/

带有非常重要的尾部斜杠

因此，对

example.com/auth/static/style.css

的客户端请求匹配位置块

/auth

，Nginx删除

/auth

，并将其替换为

，现在您的代理将获得

proxy.server//static/style.css

如果删除斜杠以将

proxy\u pass

指令更改为

proxy\u passhttp://authentication.internal.app

整个客户端请求URL将传递给代理，因此上述请求将被代理到

proxy.server/auth/static/style.css

。相反，保留

proxy\u pass

值按原样，将位置块更改为

location/auth/

，Nginx现在将

/auth/

替换为

，代理请求将变成

proxy.server/static/style.css

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

location/

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

计算所有前缀匹配项时，不考虑它们列出的顺序，Nginx会选择最长的匹配前缀位置。现在，将针对包含正则表达式的所有位置块计算请求，这一部分确实按它们列出的顺序进行，如果其中任何一个匹配，Nginx将立即忘记最长的前缀位置然后将请求传递到匹配的正则表达式位置。如果没有匹配的，则最佳前缀匹配将处理该请求

通过在位置之前添加

^ ~

修饰符，可以防止Nginx搜索与特定前缀位置匹配的请求的正则表达式匹配项

显然，您当前的配置中没有正则表达式位置，所以很多内容现在都不相关，但是如果您稍后继续使用该方法，它可能不太直观，因此可能会在某个时候有所帮助。