Question

我有一个使用create-react-app和typescript创建的应用程序。此应用程序是oauth2客户端，它需要带有https的有效redirect_uri。它还使用websockets。我可以设置一个接受https和wss连接的nginx服务器，并将它们转发到我的开发机器。

这是应该如何工作的：

Web浏览器-> https和wss请求-> nginx-> ssh隧道（远程转发）->开发机器->本地webpack和本地应用程序服务器

Nginx将所有https请求映射到localhost：3000，并将所有wss请求（在/ api下的任何内容）映射到localhost：9091。这些通过ssh隧道转发到本地开发机器。本地开发人员计算机在端口3000上运行webpack，在端口9091上运行一个appserver。

这使我可以使用有效的https证书和redirect_uri值来开发基于Web的有效oauth2客户端。此设置已使用了很长时间。今天，我已经更新了所有软件包（包括节点js，create-react应用和webpack），并且停止工作。这是跟踪日志：

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
./node_modules/react-dev-utils/webpackHotDevClient.js
node_modules/react-dev-utils/webpackHotDevClient.js:60
__webpack_require__
/home/my_user/projects/my_project/frontend/webpack/bootstrap:785

当然，问题在于webpack使用websocket进行热重载通知，并且默认代码假定该webpack服务器在ws：// localost可用。实际上，该页面加载了https。因此，热加载代码尝试从使用https加载的页面创建到ws：// localhost的不安全websocket。

由于oauth2客户端必须使用https，因此显而易见的解决方案是完全关闭热重装。但这会减慢开发速度。为了有效地工作，我需要热重装。仅当我还可以将热重载客户端的websocket从nginx转发到我的本地webpack服务器时，这才起作用。换句话说：通过wss：//而不是ws：//。

但是，我不知道该怎么做。甚至可以重新路由热重载客户端吗？有没有选择的余地？我可以看到可以关闭热重装。但是我看不到任何方法可以重新路由Websocket的URL。

更新-不再需要此功能，已在v3.3.1 https://github.com/facebook/create-react-app/pull/8079中解决。但是仍然有一些软件包依赖于旧版本。在这种情况下，可以使用下面提供的解决方案。

Answer 1

我找到了解决方案。这确实是一种黑客，但是它可以用于同时通过https，您自己的websockets和webpack开发服务器自己的socks-node websocket 来测试oauth2客户端。

安装所有必需的软件包
编辑您的node_modules / react-dev-utils / webpackHotDevClient.js文件

替换此：

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

与此：

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'wss',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

这将强制nodejs-socket使用wss而不是ws。如果nodejs-socket也通过您的Web服务器通过隧道传输到本地Webpack开发服务器，那么它将起作用！

如果该代码可以根据window.location协议使用ws / wss，那就太好了。

Answer 2

自从发布后仅几周就发布了create-react-app 3.4.0，现在您可以精确调整以下环境变量：

varchar(50)
WDS_SOCKET_HOST
WDS_SOCKET_PORT

检查此提交以获取更多详细信息：create-react-app#822422c

如何重新路由Webpack热装客户端？

2 个答案: