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

Question

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

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"
  },
(...)

我看到有人建议 HERE 我可以在代理设置中使用一个对象，但是当我尝试时我得到一个错误，代理地址必须是一个字符串，而不是一个对象：

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

Answer 1

经过一番搜索，终于找到了解决办法https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

首先，安装http-proxy-middleware。接下来，创建 src/setupProxy.js 并将以下内容放入其中：

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy({
        target: '<url>',
        ws: true,
        changeOrigin: true
    })
  );
  app.use(
    '/foo',
    proxy({
        target: '<other_url>'
    })
  );
};

Answer 2

重新发布我在这里发布的解决方案：https://github.com/facebook/create-react-app/issues/5280

我遇到了无法将请求（开发中）代理到我自己的 websocket (socket-io) 服务器的问题。

我按照这里的步骤操作：create-react-app proxying requests in dev，我的 setupProxy.js 看起来像这样：

以下不适用于代理 websocket 连接：

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,
    }),
  );
};

但是，热重载不起作用，因为这会以某种方式干扰 webpack 开发服务器 websocket 连接。我会在控制台中看到此错误：

[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)

我通过执行以下操作使此工作正常进行：

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

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

希望这对某人有所帮助！让我知道是否有更好的方法来做到这一点

Answer 3

对我来说，将 /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

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

WebSockets in Create React App with Webpack proxy

websocket

signalr

reactjs

webpack

create-react-app