如何解决 VueJS SPA 和 GraphQL 后端的 Nginx 重写循环？

2024-03-10 11:09:37

解决 VueJS SPA 和 GraphQL 后端的 Nginx 重写循环

简介

使用 Nginx 作为反向代理时，在提供 VueJS 单页应用程序 (SPA) 和 GraphQL 后端的应用程序中配置重写规则可能会遇到挑战。本文将深入探讨重写循环问题及其在使用 SPA 路由时解决方法。

重写循环

在使用 History-Routing 的 SPA 中，URL 不包含哈希值或片段。当请求到达反向代理时，它找不到匹配的静态文件，并根据 try_files 指令回退到 /index.html。但是，由于 SPA 路由在前端处理，因此对 /index.html 的请求也会被代理回后端，从而创建重写循环。

解决方法

要解决此问题，需要对 Nginx 配置进行以下更改：

重写根路径： 添加 rewrite ^/$ /index.html last; 指令将所有对根路径的请求重写为 /index.html，从而阻止重写循环。
保留 try_files 指令： 仍然需要对 /index.html 的直接请求保留 try_files 指令，例如刷新或首次加载页面。
保持 GraphQL 路径： 保留 GraphQL 路径的原始配置，以将 GraphQL 请求代理到后端。

代码示例

server {
    listen      4430 ssl;
    server_name myapp.mydomain.ch;

    ssl_certificate /etc/letsencrypt/live/myapp.mydomain.ch/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.mydomain.ch/privkey.pem;

    location / {
        rewrite ^/$ /index.html last;

        proxy_pass http://myhost:10000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /graphql {
        proxy_pass http://myhost:10000/graphql;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

结论

通过实施这些更改，可以解决重写循环问题并正确处理 SPA 路由。更新后的 Nginx 配置允许应用程序无缝运行，既可以用于后端 API 的 GraphQL 请求，也可以用于 SPA 路由。

常见问题解答

为什么使用 try_files 指令？
try_files 指令允许服务器尝试多个文件路径，直到找到匹配的文件为止。对于 SPA，它用于查找 /index.html 文件，以便在找不到其他匹配项时提供回退。
rewrite 指令如何防止重写循环？
rewrite 指令将所有对根路径的请求重写为 /index.html，从而阻止它们被代理回后端。
我应该在哪里放置 rewrite 指令？
rewrite 指令应该放在根路径 (location /) 配置的顶部。
SPA 路由如何处理？
SPA 路由在前端使用 History-Routing 进行处理。服务器只需要将所有请求代理到根路径，并且 SPA 将使用其自己的路由逻辑来处理 URL。
我需要对 GraphQL 路径做任何更改吗？
不，GraphQL 路径的原始配置可以保持不变。它用于将 GraphQL 请求代理到后端。