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

Question

我使用版本 3.1.2(2019 年 9 月 19 日)中的 Create React App 创建了我的 React 应用程序。我试图为 Web Socket 请求配置代理，但似乎当我使用代理时，没有建立连接。我用过 THIS设置我的东西的例子。该服务器是示例中的 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"
  },
(...)

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

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

Answer 1

重新发布我在此处发布的解决方案: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' });

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