Express JS代理Web API无响应问题及自定义URL修改代理方案咨询

Got it, let's build that dynamic, URL-tweaking proxy server you need. The issue with your current setup is that it's pointing to a fixed target (Google), but we need to make it adapt based on the URL the browser sends over. Here's the optimal approach using Express and http-proxy-middleware—tools that are standard for this kind of work.

Step 1: Install Dependencies #

First, make sure you have the necessary packages installed:

npm install express http-proxy-middleware cors

Step 2: Full Server Code #

This implementation reads the target URL from the browser, modifies it, proxies the request to the new address, and returns the response. Adjust the modification logic to match your specific needs:

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

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

// Enable CORS to allow browser requests from your frontend
app.use(cors());

// Parse JSON bodies (for POST requests if needed)
app.use(express.json());

// Dynamic proxy route
app.use('/proxy', createProxyMiddleware({
  // Dynamically determine the target URL based on the request
  target: (req) => {
    // Get the original URL from query parameter (e.g., ?url=https://example.com/api)
    const originalUrl = req.query.url;
    
    if (!originalUrl) {
      throw new Error('Missing "url" query parameter. Include ?url=<your-target-url>');
    }

    // Modify the URL here—customize this logic to your requirements
    try {
      const urlObj = new URL(originalUrl);
      
      // Example modifications:
      // 1. Change the domain (e.g., swap example.com for api.example.com)
      urlObj.host = `api.${urlObj.host}`;
      // 2. Add a path prefix (e.g., /v1 before the original path)
      urlObj.pathname = `/v1${urlObj.pathname}`;
      // 3. Add a required API key query parameter
      urlObj.searchParams.append('api_key', 'your-secure-api-key');
      
      return urlObj.toString();
    } catch (err) {
      throw new Error(`Invalid URL format: ${err.message}`);
    }
  },
  // Critical: Ensures the target server receives the correct Host header
  changeOrigin: true,
  // Rewrite the path since we already included the full path in the target URL
  pathRewrite: () => '',
  // Handle errors gracefully and send meaningful responses to the browser
  onError: (err, req, res) => {
    if (err.message.includes('Missing') || err.message.includes('Invalid URL')) {
      res.status(400).send(err.message);
    } else {
      res.status(500).send(`Proxy request failed: ${err.message}`);
    }
  },
  // Optional: Modify headers sent to the target server
  onProxyReq: (proxyReq, req, res) => {
    proxyReq.setHeader('X-Proxy-Source', 'MyCustomProxy');
  }
}));

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

Key Features Explained #

• Dynamic Target: The proxy uses the url query parameter from the browser to get the original URL, modifies it, and proxies to the new address.
• CORS Support: Allows your frontend app to make requests to the proxy without cross-origin errors.
• Error Handling: Catches missing/invalid URLs and proxy failures, returning clear HTTP status codes and messages.
• ChangeOrigin: Ensures the target API sees the correct host header, which many APIs require for authentication or routing.
• Flexible Modifications: The URL manipulation logic (domain swap, path prefix, query params) is fully customizable to your use case.

Testing the Proxy #

Run the server, then send a request from your browser or frontend app:

GET http://localhost:3000/proxy?url=https://example.com/your-endpoint

The proxy will modify the URL (e.g., to https://api.example.com/v1/your-endpoint?api_key=your-secure-api-key) and return the response from that modified address.

Edge Cases to Consider #

• URL Validation: Add a whitelist of allowed domains to prevent proxying to malicious sites (e.g., check if urlObj.host is in your approved list).
• POST Requests: If your frontend sends POST data, the proxy will forward it automatically—just ensure you're parsing JSON bodies with express.json().
• HTTPS Targets: The proxy handles HTTPS by default. For self-signed certificates (only for development), add secure: false to the proxy options.

This setup is maintainable, scalable, and leverages industry-standard tools to solve your problem effectively.

内容的提问来源于stack exchange，提问作者Dot Net Dev