Nginx部署Laravel+Nuxt站点 404跳转失效且线上无效路径无限加载

问题场景 #

基于Laravel + Nuxt架构的站点，本地执行nuxt generate + nuxt start时，访问不存在路径可正常跳转404页面；生产环境通过Nginx反向代理Nuxt服务时，访问无效路径会出现无限加载的异常，经多次调整Nginx配置仍未解决。

核心问题定位 #

• Nginx配置形成内部递归循环：443服务块内定义了error_page 404 /404.html，但站点为全路径代理转发架构，Nginx本地磁盘不存在对应的404.html文件。当Nuxt服务返回404状态时，Nginx会根据error_page规则发起内部跳转请求本地的/404.html，这个请求又会被location /规则匹配后转发给Nuxt服务，形成无限递归的内部请求循环，最终造成客户端连接挂起、页面无限加载。
• 代理缓存规则缺失：当前proxy_cache_valid仅配置了200、301、302状态码的缓存时长，未覆盖404状态码，导致无效路径的响应被缓存层拦截后无法正常回传给客户端。
• Nuxt配置适配偏差：ssr: true搭配target: 'static'的组合下，静态生成后的Nuxt服务未配置fallback路由规则，线上环境接收到无效路径请求时，无明确的404响应返回逻辑。

具体修复步骤 #

1. 调整Nginx错误处理逻辑
   • 删除触发内部递归跳转的error_page 404 /404.html;配置，让404响应直接从Nuxt服务透传给客户端，打断递归循环。
   • 补充404状态码的缓存规则，避免高频无效请求反复打到Nuxt服务：在代理配置块内新增proxy_cache_valid 404 1m;
   • 禁用HTML类响应的代理缓存：配置中已通过map规则将text/html的过期时间设置为epoch（不缓存），需要同步在代理层增加规则，避免HTML内容被错误缓存。
2. 对齐Nuxt静态生成配置
   • 补充静态路由的fallback规则，确保不存在的路径直接返回Nuxt内置的404页面响应，避免服务端请求挂起：

   // 写入nuxt.config.js对应配置段
   generate: {
     fallback: {
       statusCode: 404,
       path: '404.html'
     }
   }
   

3. 优化代理匹配规则
   • 去掉location块内无意义的本地文件查找逻辑，确保所有未匹配的路径请求都直接代理到Nuxt服务，不做本地文件递归查找：

   location / {
       proxy_pass http://localhost:4000;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
       # 新增规则：text/html类型响应不写入缓存
       proxy_no_cache $upstream_http_content_type ~* text/html;
       proxy_cache cache;
       proxy_cache_key $host$uri$is_args$args;
       proxy_cache_valid 200 301 302 12h;
       proxy_cache_valid 404 1m;
   }
   

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