node.js - 如何在http-proxy-middleware v3.0中正确配置多个代理以避免空白页面？

Question

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

module.exports = function (app) {
  app.use(
    '/res',
    createProxyMiddleware({
      target: 'http://127.0.0.1:7001',
      changeOrigin: true,
    })
  );

  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://127.0.0.1:7001',
      changeOrigin: true,
    })
  );

  app.use(
    '/static',
    createProxyMiddleware({
      target: 'http://127.0.0.1:7001',
      changeOrigin: true,
    })
  );
};

这样配置项目跑起来是空白的

Answer 1

在http-proxy-middleware中配置多个代理通常不会导致空白页面，除非你的代理配置有误或者后端服务没有正确响应。然而，从你的配置来看，似乎所有的代理都指向了同一个目标地址http://127.0.0.1:7001，这本身不是问题，但你需要确保该地址上的服务能够正确处理来自不同路径（/res, /api, /static）的请求。

以下是几个可能导致空白页面的原因以及如何解决它们的建议：

1. 确保后端服务正常工作：
   首先，确保http://127.0.0.1:7001上的服务正在运行，并且它能够为你的前端应用程序提供所需的资源。你可以尝试直接访问这些资源（例如，在浏览器中打开http://127.0.0.1:7001/res，http://127.0.0.1:7001/api，http://127.0.0.1:7001/static）以查看是否返回了正确的响应。
2. 检查代理路径重写：
   如果你的后端服务期望不同的路径（而不是/res, /api, /static），你可能需要配置pathRewrite选项来重写请求的路径。但是，从你的配置来看，这似乎不是问题，因为你将所有请求都代理到了相同的地址。
3. 检查浏览器控制台和网络标签页：
   打开浏览器的开发者工具，并检查网络标签页以查看请求和响应。这将帮助你了解是否有任何请求失败或返回了意外的响应。如果请求失败或返回了错误状态码（如404或500），那么你需要检查后端服务以解决问题。
4. 检查前端代码：
   确保你的前端代码没有错误，并且它正在尝试从正确的路径加载资源。例如，如果你的前端代码尝试从/some/other/path加载资源，那么这些请求将不会被代理到http://127.0.0.1:7001，因为它们不匹配你配置的任何代理路径。
5. 考虑其他中间件：
   如果你的应用程序中还有其他中间件，请确保它们没有干扰到代理中间件的工作。例如，你可能有一个中间件试图处理所有请求并返回一个空白页面，或者它可能修改了请求或响应的某些部分，从而导致问题。
6. 升级或降级http-proxy-middleware：
   如果你怀疑http-proxy-middleware的版本有问题，你可以尝试升级或降级到另一个版本来查看是否解决了问题。但是，从你的配置和描述来看，这似乎不太可能是问题所在。
7. 检查其他配置和依赖项：
   最后，请确保你的应用程序的其他配置和依赖项都是正确的，并且它们没有引入任何可能导致空白页面的问题。

如果以上建议都不能解决你的问题，那么你可能需要更详细地检查你的应用程序和后端服务的日志，以了解在请求和响应过程中发生了什么。此外，你也可以考虑在Stack Overflow或相关社区中寻求帮助，并提供更多的上下文和详细信息，以便其他人能够更好地帮助你解决问题。