使用ProxyHTMLURLMap重定向CSS/JS请求及Apache反向代理Node应用问题

Got it, let's fix that apidoc static resource issue you're facing. The core problem here is that when your Node app serves apidoc files via express.static('doc'), the generated HTML references CSS/JS assets using root-relative paths (like /css/style.css). But since Apache is proxying requests through /node/, browsers try to fetch /node/css/style.css—a path that doesn't exist on your Node server. We'll use Apache's mod_proxy_html module to rewrite these paths correctly.

Step 1: Enable Required Apache Modules #

First, make sure all the modules needed for proxy and HTML rewriting are enabled. Run these commands in your terminal:

sudo a2enmod proxy proxy_http proxy_html xml2enc
sudo systemctl restart apache2

Step 2: Update Your Apache Virtual Host Configuration #

Open your HTTPS virtual host config file (usually located at /etc/apache2/sites-available/myapi.com-ssl.conf or similar) and adjust the proxy section to include HTML rewriting directives. Here's the relevant configuration you need:

<VirtualHost *:443>
    ServerName myapi.com
    # ... keep your existing SSL and Tomcat proxy settings here ...

    # Proxy rule for Node.js app
    ProxyPass /node/ http://localhost:3000/
    ProxyPassReverse /node/ http://localhost:3000/

    # Enable HTML URL rewriting
    ProxyHTMLEnable On
    # Rewrite root-relative paths to include /node/ prefix
    ProxyHTMLURLMap / /node/

    # Optional: If your apidoc assets are served under /doc/ in Node (e.g., http://localhost:3000/doc/css/), use this instead:
    # ProxyHTMLURLMap /doc/ /node/doc/

    # Unset Accept-Encoding to avoid parsing compressed HTML
    RequestHeader unset Accept-Encoding
</VirtualHost>

Step 3: Double-Check Your Node.js Express Setup #

Confirm your Node app is serving the apidoc static files correctly. Your express code should look similar to this:

const express = require('express');
const app = express();

// Serve apidoc static files from the local 'doc' directory
app.use('/doc', express.static('doc'));

// Your existing Node routes
app.get('/foo', (req, res) => {
    res.send('Response from Node app!');
});

app.listen(3000, () => {
    console.log('Node app listening on port 3000');
});

If your apidoc is accessible at http://localhost:3000/doc/ directly, make sure to use the optional ProxyHTMLURLMap /doc/ /node/doc/ line in Apache's config instead of the root path map.

Step 4: Test and Restart Apache #

Before restarting, validate your config for syntax errors:

sudo apache2ctl configtest

If you see "Syntax OK", restart Apache to apply changes:

sudo systemctl restart apache2

Why This Works #

• ProxyHTMLEnable On tells Apache to parse response HTML and rewrite embedded URLs.
• ProxyHTMLURLMap replaces the original path prefix with the /node/ proxy prefix—so /css/style.css becomes /node/css/style.css, which Apache forwards to http://localhost:3000/css/style.css.
• Unsetting Accept-Encoding ensures Apache receives uncompressed HTML, which it can parse and rewrite correctly.

This should resolve the broken CSS/JS links in your apidoc while keeping your existing /node/foo proxy routes working as expected.

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