如何用Node&Express自建服务器代理外部网页并实现跨域DOM操作？

Great question! The reverse proxy approach is exactly the right way to get around cross-domain restrictions while letting you modify the page's visuals without touching the original site's content. Here's a step-by-step implementation with Node.js and Express:

Step 1: Set Up Your Project & Dependencies #

First, initialize a new Node.js project and install the required packages. We'll use express for the server and http-proxy-middleware to handle proxying requests to the target website:

npm init -y
npm install express http-proxy-middleware

Step 2: Build the Proxy Server with DOM Modification Logic #

Create a file (e.g., server.js) with the following code. This server will fetch the target website's content, inject your custom visual modification scripts, and serve it under your own domain:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();
const PORT = 3000;

// Configure proxy settings for the target website (e.g., Google)
const proxyConfig = {
  target: 'https://www.google.com',
  changeOrigin: true, // Makes the target server think the request comes from your domain
  headers: {
    // Mimic a browser request to avoid being blocked by anti-scraping measures
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
  },
  onProxyRes: (proxyRes, req, res) => {
    // Intercept the response from the target site to inject our custom code
    let responseBody = [];
    
    // Collect the response chunks
    proxyRes.on('data', (chunk) => {
      responseBody.push(chunk);
    });
    
    // Process the full response once all chunks are received
    proxyRes.on('end', () => {
      responseBody = Buffer.concat(responseBody).toString();
      
      // Your custom DOM modification script (visual-only changes)
      const customVisualScript = `
        <script>
          // Example 1: Change page background color
          document.body.style.backgroundColor = '#f5f5f5';
          
          // Example 2: Modify header text color
          const headers = document.querySelectorAll('h1, h2, h3');
          headers.forEach(header => header.style.color = '#2d3748');
          
          // Example 3: Add a custom banner at the top
          const banner = document.createElement('div');
          banner.style.cssText = 'background: #ecc94b; padding: 8px; text-align: center; font-weight: bold;';
          banner.textContent = 'Visual-only modification applied!';
          document.body.prepend(banner);
        </script>
      `;
      
      // Inject the script right before the closing </body> tag
      responseBody = responseBody.replace('</body>', `${customVisualScript}</body>`);
      
      // Send the modified response to the client
      res.setHeader('Content-Type', proxyRes.headers['content-type']);
      res.send(responseBody);
    });
  }
};

// Apply the proxy middleware to all routes
app.use('/', createProxyMiddleware(proxyConfig));

// Start the server
app.listen(PORT, () => {
  console.log(`Proxy server running at http://localhost:${PORT}`);
});

Step 3: Test the Setup #

Run your server with:

node server.js

Visit http://localhost:3000 in your browser—you'll see the target website (Google in this example) with your custom visual modifications applied. All changes happen only in your browser; the original site's content remains untouched.

Key Notes & Best Practices #

• Avoid Blocking: Some sites have anti-proxy measures. If you get blocked, tweak the User-Agent header or add other common browser headers (like Accept-Language) to the proxy config.
• Separate Code for Maintainability: For complex modifications, move your custom JS/CSS into separate files (e.g., public/custom-script.js) and serve them with Express's static middleware:

  app.use(express.static('public'));
  // Then inject with <script src="/custom-script.js"></script>
  

• HTTPS for Production: If you deploy this to production, use an SSL certificate (e.g., via Let's Encrypt) to serve your proxy over HTTPS—most modern sites block mixed-content requests.

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