javascript - 反应路由器相对路径到静态文件未正确加载
问题描述
我有一个反应应用程序(简单的前端应用程序),它在生产中位于相对路径上(例如 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 的任何内容替换与您的位置块匹配的原始客户端请求 URL 的部分proxy_pass
。
所以在你的情况下,你有location /auth
一个proxy_pass http://authentication.internal.app/
非常重要的斜杠
example.com/auth/static/style.css
因此,与 location 块匹配的客户端请求/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 搜索匹配某个前缀位置的请求的正则表达式匹配项。
显然,您当前的配置中没有正则表达式位置,因此其中很多现在都不相关,但是如果您以后沿着这条路线走,它就不是很直观,所以也许它会在某些时候有所帮助。
推荐阅读
- javascript - 基于 parentId 和 id 属性嵌套平面对象
- python-3.x - 使用 fmin() 找到最小值
- yii - 在 Yii2 中获取当前网页的完整 url
- android - 在 Android 应用程序中以编程方式启用/禁用夜灯
- c++ - std::function 复制和内存损坏
- django - 尝试安装 Django reversion
- postgresql - 如何通过查看已存在于 2 列中的数据来更新或插入 where?
- python - boost python中的enable_pickling和pickle_suite有什么区别?
- string - 带有字符串/日期时间字段的 MATLAB Pre-Allocate 结构会显着降低代码速度
- django - 下载 mysqlclient 时 Docker-compose 出错