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

【问题标题】：WebSockets in Create React App with Webpack proxy使用 Webpack 代理创建 React App 中的 WebSockets
【发布时间】：2020-01-25 01:05:20
【问题描述】：

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

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>'
      }

【问题讨论】：

尝试在前面加一个斜线，比如.withUrl("/chatHub")
没有帮助。连接在挂起状态下被阻止。如果您尝试发送消息，则会收到“错误：如果连接未处于“已连接”状态，则无法发送数据。”。
你解决了这个问题吗？
@Alexandre - neeko 提供的答案对我来说没问题

标签： reactjs webpack websocket signalr create-react-app

【解决方案1】：

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

但这有效：

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

【讨论】：

【解决方案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' });

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

【讨论】：

对于那些想要使用附加到同一域的 cookie 的人来说，这不是一个完美的解决方案..
@neeko 我不明白关于“我通过执行以下操作使这个工作：”的代码写在哪里？
@nlips 这是我定义 websocket 连接的地方
@neeko 所以你并没有真正代理查询
我遇到了和你非常相似的问题。将路径和目标都包装在 createProxyMiddleware 中为我修复了它。

【解决方案3】：

搜索了一下，终于找到了解决办法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>'
    })
  );
};

【讨论】：