时间戳

首页 > 解决方案 > 刷新页面或直接进入页面时，Nginx 路由不起作用

node.js - 刷新页面或直接进入页面时，Nginx 路由不起作用

问题描述

我正在运行带有 Vue.js 前端和 Node.js+Express.js 后端的 Docker 容器，并使用 Nginx 管理路由。

当我访问路线https://equilibrista.app/并单击页面内的链接转到https://equilibrista.app/exams时，它工作正常，但是当我直接转到此页面时出现错误（并且出现 Express 错误Cannot GET /exams）。

链接到 /exams 页面

为什么会这样？它看起来像一个 Nginx 重定向错误，但我在 nginx.conf 上找不到任何错误

server {
  listen 80;
  listen [::]:80;
  server_name equilibrista.app www.equilibrista.app;

  location ~ /.well-known/acme-challenge {
    allow all;
    root /var/www/html;
  }

  location / {
    rewrite ^ https://$host$request_uri? permanent;
  }
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name equilibrista.app www.equilibrista.app;

  server_tokens off;

  ssl_certificate /etc/letsencrypt/live/equilibrista.app/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/equilibrista.app/privkey.pem;

  ssl_buffer_size 8k;

  ssl_dhparam /etc/ssl/certs/dhparam-2048.pem;

  ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
  ssl_prefer_server_ciphers on;

  ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

  ssl_ecdh_curve secp384r1;
  ssl_session_tickets off;

  ssl_stapling on;
  ssl_stapling_verify on;
  resolver 8.8.8.8;

  location /api/ {
    proxy_pass http://api:3000/;
    proxy_redirect off;
  }

  location / {
    proxy_pass http://front:8888;
  }
}

标签： node.jsdockernginx

解决方案

我们让它与 Vue 应用程序一起工作的方式如下。

1）首先，您有一个位置可以捕获所有存在的物理文件和路径。

2) 其次，您将任何其他请求重定向到主应用程序文件，对于 Vue，它是 index.html。

因此，您的位置配置应如下所示：

location /api/ { 
    proxy_pass http://api:3000/; 
} 

location ~* \/(index\.html|favicon\.ico|styles\.css|styles\.min\.css|css\/.*|js\/.*|images\/.*) {
    proxy_pass http://front:8888;
} 

location / { 
    rewrite / /index.html; 
    proxy_pass http://front:8888;
}

（更新以匹配问题）

我们在 nginx 服务器上有静态文件，但它应该与 proxy_pass 以相同的方式工作。

推荐阅读