NGINX代理Angular应用特定URL至Node.js SSR服务出现请求循环问题

核心原因 #

你遇到的无限循环是典型的递归调用问题：当你把所有/usecase/路径的请求都转发到SSR服务后，SSR服务里的Puppeteer要渲染目标页面，就会再次请求你传入的$scheme://$host$request_uri地址，这个请求又会被NGINX拦截转发到SSR服务，无限重复这个流程最终导致请求超时。

修复方法 #

方案1：添加Puppeteer请求标识跳过SSR规则（最易落地） #

在SSR服务的Puppeteer请求中添加自定义头标识，NGINX识别到该标识就直接返回静态资源，不进入SSR逻辑：

1. 修改你的Node.js SSR代码，给Puppeteer请求加专属头：

// Puppeteer打开页面前添加自定义头
await page.setExtraHTTPHeaders({
  'X-Prerender': '1'
})

2. 修改NGINX的@usecase_prerender配置，新增该头的判断逻辑：

location @usecase_prerender {
  # 所有请求默认走SSR
  set $usecase_prerender 1;
  # 识别到Puppeteer自己的请求，跳过SSR返回静态资源
  if ($http_x_prerender = "1") {
      set $usecase_prerender 0;
  }
  # 原有静态资源后缀判断保留，静态资源不走SSR
  if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
      set $usecase_prerender 0;
  }
  resolver 8.8.8.8;
  if ($usecase_prerender = 1) {
      # 可以补充缓存配置，减少重复渲染开销
      proxy_cache my_cache;
      proxy_cache_valid 200 60m;
      proxy_pass http://localhost:5100/api/ssr/usecase?url=$scheme://$host$request_uri;
      add_header X-Real-IP $remote_addr;
      add_header X-Forwarded-For $proxy_add_x_forwarded_for;
      add_header X-Cache-Status $upstream_cache_status;
      break;
  }
  try_files $uri$args $uri$args/ /index.html;
}

方案2：SSR直接渲染本地静态文件（性能最优） #

不需要让Puppeteer走公网请求你的站点，直接在SSR服务内读取本地Angular构建好的静态页面文件（路径为/var/www/example.com/html/index.html）进行渲染，从根源上避免触发NGINX的路由规则，也能提升渲染速度。

额外注意事项 #

你当前配置中的转义字符"需要替换为实际的双引号"，否则NGINX加载配置时会抛出语法错误。

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