Nginx反向代理配置问题：VueJS SPA与GraphQL后端的重定向循环

你的Nginx配置错误出在try_files的使用逻辑上：当前配置中try_files $uri $uri/ /index.html是让Nginx先在本地磁盘查找对应文件，找不到就内部重定向到/index.html。但你的SPA文件是在后端容器里，并非Nginx本地存储，所以当重定向到/index.html时，又会进入location /块触发反向代理，形成循环。

需要调整逻辑，让Nginx先尝试代理请求到后端，当后端返回404时，再代理到/index.html交给SPA处理路由。修改后的配置如下：

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;

    # 优先匹配GraphQL接口，避免被SPA路由拦截
    location /graphql {
        proxy_pass                      http://myhost:10000/graphql;
        proxy_set_header Host           $host;
        proxy_set_header X-Real-IP      $remote_addr;
    }

    # 处理SPA路由
    location / {
        proxy_pass                      http://myhost:10000/;
        proxy_set_header Host           $host;
        proxy_set_header X-Real-IP      $remote_addr;
        # 开启拦截后端错误状态码，以便用error_page处理404
        proxy_intercept_errors on;
        # 后端返回404时，返回200状态码并代理到/index.html
        error_page 404 =200 /index.html;
    }
}

• proxy_intercept_errors on;：让Nginx能够捕获后端返回的错误状态码，否则error_page无法生效
• error_page 404 =200 /index.html;：将后端返回的404请求转换为200状态，并转发到SPA的入口文件，由前端History路由接管处理
• 把location /graphql放在location /前面：利用Nginx的location匹配优先级（精确/长前缀优先），确保GraphQL请求不会被SPA的路由规则拦截

如果你偏好使用try_files的写法，也可以采用命名location的方式：

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 /graphql {
        proxy_pass                      http://myhost:10000/graphql;
        proxy_set_header Host           $host;
        proxy_set_header X-Real-IP      $remote_addr;
    }

    location / {
        try_files $uri $uri/ @spa;
        proxy_set_header Host           $host;
        proxy_set_header X-Real-IP      $remote_addr;
    }

    # 命名location，专门处理SPA路由回退
    location @spa {
        proxy_pass                      http://myhost:10000/index.html;
        proxy_set_header Host           $host;
        proxy_set_header X-Real-IP      $remote_addr;
    }
}

内容的提问来源于stack exchange，提问作者Teankum