时间戳

首页 > 解决方案 > Nginx + 带有路由器的 React 应用程序 + Chrome = 子文件夹不起作用

reactjs - Nginx + 带有路由器的 React 应用程序 + Chrome = 子文件夹不起作用

问题描述

我有一个在 nginx 下运行的反应应用程序。应用程序运行良好，没有任何问题。

现在，我在同一台服务器上运行 kibana 和 portainer，并且我将 nginx 配置为将它们作为子文件夹运行。服务器有一个安全证书，我不能真正创建新的子域。所以我不得不使用子文件夹。

server {
listen       80;
listen       443 ssl;
server_name  api.nec.private.systems;

ssl_certificate     /etc/ssl/api.nec.private.systems.crt;
ssl_certificate_key /etc/ssl/api.nec.private.systems.key;
ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers         HIGH:!aNULL:!MD5;

root /usr/share/nginx/html;

location / {
    # Set path
    try_files $uri /index.html;
}

# Do not cache sw.js, required for offline-first updates.
location /sw.js {
    add_header Cache-Control "no-cache";
    proxy_cache_bypass $http_pragma;
    proxy_cache_revalidate on;
    expires off;
    access_log off;
}


location /control/ {
    proxy_pass http://portainer:9000/;
    add_header Cache-Control "no-cache";
    proxy_cache_bypass $http_pragma;
    proxy_cache_revalidate on;
    expires off;
    access_log off;
}
    location /kibana/ {
    proxy_pass http://kibana:5601/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    # proxy_cache_bypass $http_upgrade;
    add_header Cache-Control "no-cache";
    proxy_cache_bypass $http_pragma;
    proxy_cache_revalidate on;
    expires off;
    access_log off;
}
}

如您所见，前两个位置描述了 react 应用程序，后两个位置都是关于 kibana 和 poratiner。

现在，问题来了：

  1. 我会打开谷歌浏览器并转到 api.nec.private.systems/control - 它会毫无问题地拉起搬运工。
  2. 我会打开 api.nec.private.systems/kibana 并按预期获得 kibana。
  3. 我会打开 api.nec.private.systems/ 并打开带有反应路由器的反应应用程序。

  4. 现在，完成第 3 步后，我将打开 api.nec.private.systems/kibana，它不再打开 kibana，而是尝试在我的路由器中输入 /kibana。它根本不会打开 kibana。不管我会尝试多少。

  5. 第 X 步 - 清除谷歌浏览器的缓存并重试 - kibana 和 poirtainer 工作得很好。直到我打开反应应用程序。

有任何想法吗？

标签： reactjsnginxkibanaservice-worker

解决方案

好的，所以我在这里找到了自己的问题。这一切都归功于 create-react-app 附带的 service worker。基本上，服务工作者试图将所有请求从应用程序重定向到本地存储缓存。

杀死了服务，它开始正常工作。

推荐阅读