ExpressJS与Flutter Web应用带/不带端口请求时的异常问题

问题根源 #

1. Nginx精确匹配规则限制：配置中用了location = /nexus-vote/，仅精确匹配带末尾斜杠的请求，而用户访问不带端口的xxxxx/nexus-vote（无末尾斜杠）时，不会触发该规则，导致请求处理异常。
2. 路径转发不匹配：Nginx的proxy_pass带末尾斜杠，转发后会向Express请求/nexus-vote//，虽然Express能返回index.html，但静态资源路径会因base URL错误无法加载。
3. Flutter静态资源路径错误：Flutter Web打包后的资源默认基于根路径，反向代理到/nexus-vote路径下时，资源URL不匹配，浏览器加载失败，导致页面空白。

修复步骤 #

1. 调整Nginx配置 #

修改location规则，兼容带/不带斜杠的请求，同时修正路径转发和路由处理：

location /nexus-vote {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass https://localhost:4000/nexus-vote;
    # 处理Flutter单页应用路由，防止刷新404
    try_files $uri $uri/ /nexus-vote/index.html;
}

• 去掉=改为前缀匹配，覆盖/nexus-vote和/nexus-vote/两种请求
• proxy_pass去掉末尾斜杠，避免生成双重斜杠路径
• 添加try_files确保Flutter路由刷新时仍能返回index.html

2. 修正Express路由 #

让路由兼容带/不带斜杠的请求，或覆盖所有子路径：

// 兼容两种路径格式
app.get(["/nexus-vote", "/nexus-vote/"], async (req, res) => {
  try {
    console.log(`serving from js ${__dirname}`);
    res.status(200)
      .set("Content-Security-Policy", "default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'")
      .sendFile(path.join(__dirname, "/web/index.html"));
  } catch (e) {
    console.log(e);
  }
});

// 若为单页应用，可改用通配符处理所有子路径
// app.get("/nexus-vote/*", async (req, res) => {
//   try {
//     console.log(`serving from js ${__dirname}`);
//     res.status(200)
//       .set("Content-Security-Policy", "default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'")
//       .sendFile(path.join(__dirname, "/web/index.html"));
//   } catch (e) {
//     console.log(e);
//   }
// });

3. 设置Flutter Web的base href #

打包时指定正确的base路径，确保静态资源URL正确：

• 打包命令：flutter build web --base-href="/nexus-vote/"
• 或手动修改web/index.html中的<base href="/">为<base href="/nexus-vote/">

完成以上修改后，不带端口访问xxxxx/nexus-vote时，浏览器就能正确加载所有静态资源，页面正常显示。

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