Nginx部署Flutter Web应用时.js文件无法加载（返回502错误）

问题核心 #

部署Flutter Web到家用Nginx服务器，访问对应IP时index.html可正常加载，但test.js等静态资源返回502错误，请求地址为http://192.168.1.187/test.js。

问题原因 #

你的Nginx配置中存在一个空的静态资源匹配规则：

location ~* \.(js|jpg|png|css)$ {}

该规则会匹配所有JS、图片、CSS文件请求，但块内无任何处理逻辑。结合配置顶部的set $server 127.0.0.1等反向代理变量，Nginx会尝试将这些请求转发到127.0.0.1:80，而该地址无对应服务，最终导致502错误。

解决方案 #

修改Nginx的default.conf配置，可选择以下两种方式：

方案1：移除空规则块

直接删除这一行无效配置：

location ~* \.(js|jpg|png|css)$ {}

此时静态资源请求会自动落到location /块，通过try_files从root /usr/share/nginx/html目录读取文件。

方案2：完善静态资源处理规则（推荐）

保留规则块并添加静态文件处理逻辑，同时可配置缓存优化加载速度：

location ~* \.(js|jpg|png|css|json)$ {
    root /usr/share/nginx/html;
    expires 30d; # 静态资源缓存30天，可按需调整
    add_header Cache-Control "public, immutable";
}

验证步骤 #

1. 修改配置后，重启Nginx服务：

nginx -s reload

2. 清除浏览器缓存，重新访问页面，检查JS文件是否正常加载。

额外说明 #

由于你是将Flutter Web部署在根路径，保持默认的base href="/"即可，之前修改为./或移除属性的操作，并非导致本次502错误的原因。

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