nginx 以 404 Not Found（单页应用程序）响应

Question

我有一个带有常规浏览器路由器（没有哈希）的单页应用程序。每当有人浏览页面并点击刷新按钮时，nginx 都会尝试在此路径上查找文件。因此，如果有人在 mypage.com/about 上，nginx 会查找 about 文件并以 404 Not Found 响应。如何解决这个问题？

我正在考虑使用通配符指定一个位置 - mypage.com/* 除了/api tho，因为此应用程序中的每个后端端点都以 api 开头。如何匹配除一个以外的所有路径？这是我的配置的样子：

upstream frontend {
    server frontend:3000;
}

upstream backend {
    server backend:8000;
}

server {
    listen 80;

    location /api {
        proxy_pass http://backend;
        proxy_set_header Host            \$http_host;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
    }

    location / {
        proxy_pass http://frontend;
        proxy_redirect default;
    }
}

Answer 1

为什么您的代理请求前端应用程序？我假设您正在使用某种开发服务器来为您的前端应用程序提供服务。最好将您的前端应用程序构建为静态文件并将它们作为常规静态文件提供，除了 nginx 之外没有任何服务器。

至于您的问题，如果您将前端应用程序构建成静态文件，您可以像这样在 nginx 中配置位置：

root /var/www/your_site;
location / {
    try_files $uri /index.html;
}

其中 index.html 是应用程序的入口点，根路径应配置为存储位置。

如果您仍想通过 nginx 从开发服务器为前端应用程序提供服务，您可以配置 nginx 以处理来自上游的错误并将错误页面指向开发服务器的根目录。

在这种情况下，以下指令应该可以帮助您： http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_intercept_errors http://nginx.org/en/docs/http/ngx_http_core_module.html#error_page