反应路由器相对路径到静态文件未正确加载
逆行者
我有一个反应应用程序（简单的前端应用程序），它在生产中位于相对路径上（例如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;
}
}
米尼克
当您指定proxy_pass指令时，如果您在基本 URL 的末尾附加任何内容，Nginx 将替换原始客户端请求 URL 中与您添加到proxy_passURL 的任何内容块匹配的部分。
所以在你的情况下，你有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 将立即忘记最长的前缀位置并将请求传递给匹配的正则表达式位置。如果没有匹配，则最佳前缀匹配将处理请求。
您可以通过^~在位置前添加修饰符来阻止 Nginx 为匹配特定前缀位置的请求搜索正则表达式匹配项。
显然，您当前的配置中没有正则表达式的位置，所以很多现在都无关紧要，但是如果您稍后沿着这条路线走，它就不是很直观，所以也许它在某些时候会有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
我在反应路由器相对路径时遇到困难。基本路径从位置栏中消失
- 2
使用路由器时如何修复相对路径（ExpressJS）
- 3
仅具有相对路径的主路由器插座内的路由器插座
- 4
django静态文件的相对路径不起作用
- 5
django静态文件的相对路径不起作用
- 6
使用相对路径加载文件
- 7
创建目录并从相对路径加载文件
- 8
通过相对路径从资源加载文件（春季）
- 9
Cronjob相对路径未执行文件
- 10
摆脱相对路径反应（删除“ ../ ..”）
- 11
从路由名称获取相对路径
- 12
jQuery加载和相对路径
- 13
从绝对基础到相对路径
- 14
从绝对路径到相对路径
- 15
文件的Java相对路径
- 16
Grunt源文件相对路径
- 17
参考文件的相对路径
- 18
Yii相对路径包含文件
- 19
用相对路径打开文件
- 20
制作包含文件的相对路径
- 21
HTML文件中的相对路径
- 22
WPF文件关联相对路径
- 23
使用正确的路径反应路由器嵌套的路由
- 24
反应路由器将IndexRoute重定向到正确的路径
- 25
物理驱动器上的完整路径到相对路径
- 26
如何处理 Web API 中的静态文件相对路径？
- 27
如何通过绝对或相对路径获得正确的路径？
- 28
具有相对路径的本地文件未在NodeJS Express应用程序中加载
- 29
包外的Java访问文件通过相对路径加载为映像（JavaFX）
我来说两句