使用 Webpack 代理创建 React App 中的 WebSockets

Question

我使用版本 3.1.2（2019 年 9 月 19 日）中的 Create React App 创建了我的 React 应用程序。我试图为 Web Socket 请求配置代理，但似乎当我使用代理时，没有建立连接。我用这个例子来设置我的东西。该服务器是示例中的 Asp.Net Core，只要将地址连接到初始化中，它就可以工作。这个片段有效：

const hubConnection = new HubConnectionBuilder()
  .withUrl("https://localhost:44392/chatHub")
  .build();

而这不会：

const hubConnection = new HubConnectionBuilder()
  .withUrl("chatHub")
  .build();

有了这个：

{
  "proxy": "https://localhost:44392/",
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@microsoft/signalr": "^3.0.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.2"
  },
(...)

我在这里看到一个建议，我可能会在代理设置中使用一个对象，但是当我尝试时，我收到一个错误，即代理地址必须是单个字符串，而不是一个对象：

 proxy: {
      '^/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '^/foo': {
        target: '<other_url>'
      }

Answer 1

对我来说，将特定路由代理/api为 websocket 路由并不适用于之前建议的src\setupProxy.js配置。

但这有效：

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

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api',{
            target: 'http://localhost:9800',
            changeOrigin: true,
        })
    );

    app.use(
        createProxyMiddleware('/api/notification/register', {
            target: 'ws://localhost:9800',
            ws: true,
            changeOrigin: true,
        })
    );
};

这实际上产生了有意义的 HPM 输出：

[HPM] Proxy created: /api  -> http://localhost:9800
[HPM] Proxy created: /api/notification/register  -> ws://localhost:9800

Answer 2

Reposting a solution I posted here: https://github.com/facebook/create-react-app/issues/5280

I had a problem where I couldn't proxy requests (in development) to my own websocket (socket-io) server.

I followed the steps here: create-react-app proxying requests in dev, my setupProxy.js looked like this:

The below did not work for proxying a websocket connection:

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

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5011',
    }),
  );
  app.use(
    '/socket-io',
    createProxyMiddleware({
      target: 'http://localhost:5011',
      ws: true,
    }),
  );
};

However, the hot reloading wouldn't work because somehow this interfered with webpack dev servers websocket connection. I would see this error in the console:

[HPM] Error occurred while trying to proxy request /sockjs-node from localhost:3000 to http://localhost:5011 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I got this working by doing the following:

const isDev = process.env.NODE_ENV === 'development';

const socket = isDev 
? io.connect('http://localhost:5011', { path: '/socket-io' }) 
: io.connect({ path: '/socket-io' });

Hope this helps someone out! Let me know if there's a better way to do this