news 2026/6/23 21:42:49

warm-flow 生产环境静态资源 404,本地正常的原因与 Nginx 配置解决方案

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
warm-flow 生产环境静态资源 404,本地正常的原因与 Nginx 配置解决方案

一、问题背景

项目中引入了一个前端模块warm-flow-ui,其静态资源路径形式如下:

/api/warm-flow-ui/css/index-BxOgKnlB.css

现象描述:

  • 本地开发环境(IDEA 直接运行 Spring Boot)访问正常,页面及 CSS、JS 均能加载。
  • 生产环境(Nginx + Spring Boot)访问同一路径时返回 404:
curl-I http://xxx/api/warm-flow-ui/css/index-BxOgKnlB.css HTTP/1.1404Not Found Server: nginx

二、问题分析过程

1️⃣ 本地为什么可以访问?

本地运行时,Spring Boot 直接提供静态资源,无需 Nginx 转发。
Spring Boot 默认会从以下位置加载静态资源:

  • classpath:/static/
  • classpath:/public/
  • META-INF/resources/

warm-flow-ui的静态文件已经被打包进了 Jar 包中,因此:

访问路径/api/warm-flow-ui/css/index-xxx.css
→ 实际由 Spring Boot 内置的静态资源映射返回。

2️⃣ 生产环境为什么会 404?

生产环境多了一层Nginx 反向代理

location /api/ { proxy_pass http://127.0.0.1:8188/; }

注意这一行配置:
proxy_pass的结尾带了 “/”

这意味着 Nginx 会去掉/api/前缀再转发。
也就是:

请求:/api/warm-flow-ui/css/index-xxx.css
被转发为:/warm-flow-ui/css/index-xxx.css

3️⃣ 验证后端真实路径

直接访问后端服务端口验证:

http://127.0.0.1:8188/warm-flow-ui/css/index-BxOgKnlB.css

✅ 能正常访问,说明后端真实暴露路径为/warm-flow-ui/**
而不是/api/warm-flow-ui/**

三、问题根因

  • 静态文件是存在的,并打包进了 Jar。
  • 问题出在Nginx 转发路径与后端实际静态路径不一致

对应关系如下:

说明
对外访问路径/api/warm-flow-ui/**
后端真实路径/warm-flow-ui/**

因此,需要在 Nginx 层做路径 rewrite 转换。

四、推荐的 Nginx 解决方案

使用rewrite对路径进行明确重写(最清晰也最安全):

location ^~ /api/warm-flow-ui/ { rewrite ^/api/(warm-flow-ui/.*)$ /$1 break; proxy_pass http://127.0.0.1:8188; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }

配置解释:

  • rewrite:将/api/warm-flow-ui/**重写为/warm-flow-ui/**
  • proxy_pass:转发到 Spring Boot 服务。
  • ^~:优先匹配,避光被上层/api/规则恶执。

五、经验总结(避坑要点)

  • 静态资源如果已打入 Jar,Nginx 仅需代理,不需设置rootalias
  • 只有静态文件放在窘盘上时,才使用alias/root
  • ⚠️proxy_pass结尾是否带/会直接影响路径转发!
    很多线上 404 都是因为这个。

六、最终效果

访问路径保持不变:

http://xxx:5666/api/warm-flow-ui/css/index-xxx.css

Nginx 转发后端命中路径:

http://xxx:8188/warm-flow-ui/css/index-xxx.css

前端页面与静态资源均可正常加载 🎉

七、结语

这是一个“本地正常,生产 404”的经典问题。
本质原因是:运行方式 + Nginx 转发规则 + 静态资源路径不一致

希望这次排际过程,能帮到遭遇相似问题的同学 🚀

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/23 20:39:43

Pyfa舰船配置工具:5个高效技巧助你成为EVE Online配置高手

Pyfa作为专业的EVE Online舰船配置工具,为玩家提供了强大的离线规划和性能分析能力。基于Python和wxWidgets开发的跨平台特性,让这款工具成为新手到专家必备的配置神器。 【免费下载链接】Pyfa Python fitting assistant, cross-platform fitting tool f…

作者头像 李华
网站建设 2026/6/23 19:43:57

洛谷 P1892 [BalticOI 2003] 团伙

题目描述现在有 n 个人,他们之间有两种关系:朋友和敌人。我们知道:一个人的朋友的朋友是朋友一个人的敌人的敌人是朋友现在要对这些人进行组团。两个人在一个团体内当且仅当这两个人是朋友。请求出这些人中最多可能有的团体数。输入格式第一行…

作者头像 李华
网站建设 2026/6/23 12:44:41

洛谷 P2024 [NOI2001] 食物链

题目描述动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形。A 吃 B,B 吃 C,C 吃 A。现有 N 个动物,以 1∼N 编号。每个动物都是 A,B,C 中的一种,但是我们并不知道它到底是哪一种。有人用两种说法对这 N…

作者头像 李华
网站建设 2026/6/23 19:43:56

Animeko跨平台动漫追番神器:从入门到精通的完整指南

在数字娱乐时代,动漫爱好者面临着内容分散、平台繁杂的困扰。Animeko应运而生,这款基于Kotlin Multiplatform技术构建的跨平台应用,彻底改变了传统追番模式。无论你是使用手机、平板还是电脑,都能享受到一致的流畅体验。 【免费下…

作者头像 李华
网站建设 2026/6/23 19:54:34

中级软件设计师英语部分备考攻略:完形填空高频考点与解题技巧

中级软件设计师考试的英语部分以完形填空为核心题型,聚焦 IT 领域核心概念与专业术语,主要考查考生对技术语境的理解、专业词汇的积累以及逻辑推理能力。题目多围绕软件架构、云计算、数据库、安全防护等高频考点展开,难度适中但对专业语境适…

作者头像 李华
网站建设 2026/6/23 16:04:00

2025年下半年软件设计师易混淆知识点

该文档聚焦软件设计师考试6 大核心模块的易混淆知识点,涵盖计算机组成与体系结构、操作系统、程序设计语言基础、数据结构、算法基础、系统开发基础,通过定义区分、表格对比、实例说明的方式,清晰梳理了原反补码运算、寻址方式、存储管理、编…

作者头像 李华