如何借助反向代理实现HTML脚本路径的通用化？

我用Node.js搭配Express开发Web应用，部署在云端服务器时，每个应用监听独立端口。为了避免URL带端口号的不美观，用Nginx做反向代理，把https://myserver/myApp的请求转发到本地3010端口的应用。但本地开发只能通过localhost:3010访问应用。

现在遇到的核心问题是静态资源路径无法跨环境复用：

• 本地环境用常规路径<link rel="stylesheet" href="/stylesheets/myStyle.css">能正常加载CSS、JS文件
• 服务器环境下必须改成<link rel="stylesheet" href="/myApp/stylesheets/myStyle.css">才能避免404错误，但这个路径在本地又会失效，导致每次切换环境都要修改代码，非常麻烦。

当前我的Nginx路由配置如下：

location /myApp {
        proxy_pass http://localhost:3010/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;

        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;
}

可行解决方案 #

方法1：给Express设置动态基础路径

通过环境变量控制应用的基础路径，让静态资源路由和模板路径自动适配环境：

// 本地环境BASE_PATH为空，服务器环境设为'/myApp'
const BASE_PATH = process.env.BASE_PATH || '';

// 静态资源路由拼接基础路径
const path = require('path');
app.use(`${BASE_PATH}/stylesheets`, express.static(path.join(__dirname, 'stylesheets')));
app.use(`${BASE_PATH}/javascripts`, express.static(path.join(__dirname, 'javascripts')));

// 模板中（以EJS为例）动态生成资源路径
// index.ejs里写：<link rel="stylesheet" href="<%= BASE_PATH %>/stylesheets/myStyle.css">
app.get('/', (req, res) => {
  res.render('index', { BASE_PATH });
});

启动命令区分环境：

• 本地：BASE_PATH='' node app.js
• 服务器：BASE_PATH='/myApp' node app.js

方法2：调整Nginx配置，保留路径前缀

修改Nginx的proxy_pass配置，去掉末尾的斜杠，让Nginx把/myApp前缀一起转发给Express：

location /myApp {
        proxy_pass http://localhost:3010; # 去掉末尾的/
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;

        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;
}

然后在Express中统一给所有路由和静态资源加上/myApp前缀：

app.use('/myApp/stylesheets', express.static(path.join(__dirname, 'stylesheets')));
app.get('/myApp/', (req, res) => {
  res.render('index');
});

这种方式下，本地访问用localhost:3010/myApp，服务器用https://myserver/myApp，资源路径统一写/myApp/stylesheets/myStyle.css，无需修改代码即可跨环境使用。

方法3：用HTML的<base>标签统一基础URL

在index.html的<head>中添加<base>标签，动态设置页面的基础URL前缀：

<!-- 模板中动态渲染base标签 -->
<base href="<%= baseUrl %>">
<link rel="stylesheet" href="/stylesheets/myStyle.css">

然后在Express中根据环境变量传递baseUrl：

const baseUrl = process.env.NODE_ENV === 'production' 
  ? 'https://myserver/myApp/' 
  : 'http://localhost:3010/';

app.get('/', (req, res) => {
  res.render('index', { baseUrl });
});

这样所有相对路径的资源都会自动拼接<base>的前缀，不用逐个修改资源路径。

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