http-proxy-rules代理无法加载图片等静态资源问题求助

看起来你的代理规则在处理静态资源请求时路径解析出了问题，这是因为正则规则的写法没有正确保留原请求的完整路径。我来帮你分析并修复这个问题：

问题原因 #

你当前的规则：

'.*/': 'http://localhost:10003/'

这个正则.*/会匹配整个请求路径（比如/assets/logo.png），然后替换成http://localhost:10003/。当http-proxy转发请求时，它会把原请求的URL（/assets/logo.png）追加到目标URL后面，最终变成http://localhost:10003//assets/logo.png——双斜杠的路径会导致Angular的静态资源服务器无法正确识别，从而返回404，这就是静态资源加载失败的核心原因。

另外，你的API规则.*/api也有潜在问题：它会匹配任何以/api结尾的路径（比如/test/api），而不是你想要的以/api开头的路径，这可能导致非预期的转发行为。

解决方案 #

修改代理规则，使用正则捕获组来完整保留原请求的路径部分，同时修正API规则的匹配逻辑：

var http = require('http'), httpProxy = require('http-proxy'), HttpProxyRules = require('http-proxy-rules');
// Set up proxy rules instance
var proxyRules = new HttpProxyRules({
  rules: {
    '^/api(.*)': 'http://localhost:10002/api$1', // 匹配所有以/api开头的路径，保留后续子路径
    '^(.*)': 'http://localhost:10003$1' // 匹配其他所有路径，完整转发到Angular服务
  },
  default: 'http://localhost:10003' // default target
});
// Create reverse proxy instance
var proxy = httpProxy.createProxy();
// Create http server that leverages reverse proxy instance
// and proxy rules to proxy requests to different targets
http.createServer(function(req, res) {
  console.log(req.url);
  var target = proxyRules.match(req);
  if (target) {
    // 添加changeOrigin确保请求头Host正确指向目标服务器
    return proxy.web(req, res, { 
      target: target,
      changeOrigin: true
    });
  }
  res.writeHead(500, { 'Content-Type': 'text/plain' });
  res.end('The request url and path did not match any of the listed rules!');
}).listen(process.env.PROXYPORT || 10001);

关键修改点： #

• API规则优化：用^/api(.*)精准匹配所有以/api开头的路径，$1引用捕获到的后续子路径，确保转发后路径是http://localhost:10002/api/xxx，和直接访问10002的API路径完全一致。
• 静态资源规则修复：用^(.*)匹配所有非API路径，$1完整保留原请求路径，转发后变成http://localhost:10003/xxx，和直接访问10003的静态资源路径完全一致。
• 添加changeOrigin: true：确保转发请求时，请求头中的Host字段被设置为目标服务器的Host（比如localhost:10003），避免某些服务器依赖Host头处理请求时出现异常。

验证方法 #

修改后重启代理服务，访问host:10001，打开浏览器开发者工具的网络面板：

• 检查静态资源的请求URL和响应状态，应该都是200成功状态，路径和直接访问10003时一致。
• 测试API功能，确认转发到10002的请求正常工作。

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