标签: http-proxy-middleware

使用 webpack2 动态编译 Angular 应用程序，我devServer这样配置：

proxy: {
    '/api': {
        target: 'http://localhost:52163'
    }
}

代理的目标是 IIS Express 服务器。从 Visual Studio 2012 升级到 2017 后，我现在ECONNREFUSED在尝试访问/api.

我进行了更改http-proxy-middleware以获取有关该错误的更多信息，并注意到它尝试连接到127.0.0.1而不是localhost.

我怎样才能确保http-proxy-middleware连接到localhost？

谢谢

在CRA 2.0中，package.json上的proxy属性不起作用。经过研究，我发现有一篇文章建议使用http-proxy-middleware。我在setupProxy.js客户端文件夹的src中创建了一个（反应侧）。包含以下代码

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
  console.log("Setup proxy is ever called");
  app.use(proxy("/api/auth/google", { target: "http://localhost:5000/" }));
};

在那之后我该怎么办。我应该在哪里导入setupProxy.js文件。从那里接收app。

我想用 http-proxy-middleware 和 express 配置代理。规则是主机名的映射，例如：

http://123.com   >>  http://localhost:3000/123
http://456.com   >>  http://localhost:3000/abc

我试过这样：

import express from 'express';
import http from 'http';
import proxy from 'http-proxy-middleware';

const app = express();

app.use( async function (req, res) {  
  let direction = 'http://localhost:3000';
  console.log('hostname: ', req.hostname);
  console.log('originalUrl: ', req.originalUrl);
  if (req.hostname == '123.com') {
    direction = `http://localhost:3000/123${req.originalUrl}`;
  }
  if (req.hostname == '456.com') {
    direction = `http://localhost:3000/abc${req.originalUrl}`;
  }

  return await proxy({ target: direction, changeOrigin: false })
});

const server = http.createServer(app);
app.set('port', '127.0.0.1');
server.listen(9999, '0.0.0.0');

但它不起作用。

在http-proxy-middleware库中，文档指出您可以使用该target选项来指定要代理请求的位置。但是，它们还允许您使用该router选项来指定将用于在运行时从功能上解析目标的函数。

文档：https : //www.npmjs.com/package/http-proxy-middleware

我正在使用 TypeScript，如果我查看代理的声明文件，我可以看到：

您可以在此处看到router和target都可以为空。我的假设是，如果你使用一个，另一个可以省略，但你总是至少需要一个。

但是，如果我使用这样的router属性：

app.use("/pipe", proxy({
    changeOrigin: true,
    router: (req: IIncomingMessageWithCookies) => {
        return "https://www.google.com";
    }
}));

并省略target，然后在运行时我收到此错误：

> node ./dist/app.js

C:\SkyKick\SkyKick.SEWR\src\node_modules\http-proxy-middleware\lib\config-factory.js:43
    throw new Error(ERRORS.ERR_CONFIG_FACTORY_TARGET_MISSING)
    ^

Error: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}
    at Object.createConfig (C:\SkyKick\SkyKick.SEWR\src\node_modules\http-proxy-middleware\lib\config-factory.js:43:11)
    at new HttpProxyMiddleware (C:\SkyKick\SkyKick.SEWR\src\node_modules\http-proxy-middleware\lib\index.js:17:30)
    at module.exports (C:\SkyKick\SkyKick.SEWR\src\node_modules\http-proxy-middleware\index.js:4:10)
    at Object.<anonymous> (C:\SkyKick\SkyKick.SEWR\src\dist\app.js:8:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load …

所以我已经在我的create-react-app应用程序上使用http-proxy-middleware. 我确定我已经按照信中的说明进行操作，但是每次我尝试单击相关链接时都会收到 404。

我正在使用create-react-appv3.2。

这是我的setupProxy.js文件：

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy("/api", { target: "http://localhost:3090" }));
};

这是发出http请求的动作创建者

export const signIn = formProps => async dispatch => {
    try {
        const response = await axios.post("/api/login", formProps);

        //.....etc, etc
    } catch(e) {

        //.....etc,etc
    }
}

这是我的快递服务器上的相关路线：

app.post("/login", requireSignIn, Authentication.login);

当开发服务器启动时，我收到以下消息：

[HPM] Proxy created: /api  -> http://localhost:3090

所以setupProxy.js显然是被 CRA 发现了，但有什么地方不对劲。我试过在代理设置中添加通配符（例如“/api/*”），但没有成功。我在客户端的控制台中登录了以下 404：

POST http://localhost:3000/api/login 404 (Not Found)

which 指的是 …

我用来http-proxy-middleware将一些 API 端点代理到我的 Create React App 开发服务器。

我最近引入了一个 WebSocket 端点，并使用以下代码来代理它setupProxy.js：

const proxy = require('http-proxy-middleware');

const target = 'http://localhost:8000';

module.exports = function(app) {
  [...] // other proxies for HTTP endpoints
  app.use(proxy('/api/ws', { ws: true, target }));
};

我遇到的问题是，如果我重新启动后端，并且 WebSocket 连接中断，整个开发服务器就会崩溃：

[HPM] Upgrading to WebSocket
events.js:170
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:171:27)
Emitted 'error' event at:
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at processTicksAndRejections (internal/process/task_queues.js:81:17)
error Command failed with exit code …

我正在尝试代理一些资产路由，其中​​路径的动态部分来自配置文件。我使用该request库进行了此工作，但我无法完全使其与http-proxy-middleware.

这是我使用该库时有效的代码request：

  const assets = express.Router();
  app.use(`/${p.name}/assets`, assets);
  assets.get('*', async (req, res) => {
    return request(`${p.address}/${p.version}/assets${req.path}`).pipe(res);
  });

  app.use(
    `/${p.name}/assets`,
    httpProxy({
      target: `${p.address}`,
      changeOrigin: true,
      pathRewrite: {
        [`^${p.name}`]: `${p.version}`,
      },
    })
  );

  app.use(
    `/${p.name}/assets`,
    httpProxy({
      target: `${p.address}`,
      changeOrigin: true,
      pathRewrite: function(path) {
        return path.replace(p.name, p.version);
      }
    })
  );

  app.use(
    `/${p.name}/assets`,
    (req, _res, …