reactjs - 与 'wss:localhost:60001/w' 的 Websocket 连接失败:连接建立时出错:net::ERR_SSL_PROTOCOL_ERROR

Question

我刚刚开始学习 React.js，我注意到我的开发者窗口 (F12) 中存在一些垃圾邮件错误。

这些是我所做的所有步骤:

1. 打开 Visual Studio 2019
2. 使用 React.js 创建 ASP.NET Core 项目
3. 选择.Net Core 5.0
4. 保留“配置 HTTPS”选项
5. 项目加载完成后我按下了“播放”
6. 点击 F12 键，我注意到控制台中弹出错误

我浏览过很多论坛，人们都在其中发布了有关此问题的帖子，但所有这些论坛都与人们设置自己的“WebSocket 处理程序”有关。这些人正在积极使用 Web 套接字代码。我什至还没学过网络套接字。我发现一个网站说我没有启用脚本调试。所以我这样做了，但我仍然看到同样的错误。

我在错误日志中注意到它指向 WebSocketClient.js，第 16 行。但所有这些都位于 ClientApp->node_modules 中，我与该目录或与这些文件无关。

我的问题是:发生错误是因为我的 Visual Studio 项目配置不正确吗？如果是这样，我该如何修复我的项目以解决此问题？非常感谢。

Answer 1

这是 cra5 又名 React-scripts v5 的问题:

1. 要解决此问题，您需要在 package.json 所在的同一文件夹中添加一个 .env 文件。

2. 在 .env 文件中放置 WDS_SOCKET_PORT=0，“0”表示它将动态选择本地服务器运行的任何端口。

3. 还需要在 Startup.cs 文件中添加/取消注释中间件 UseReactDevelopmentServer。因此它可以用作节点开发服务器的代理，因为 v5 不直接使用react-web-utils。

       app.UseSpa(spa =>
       {
           spa.Options.SourcePath = "ClientApp";
   
           if (env.IsDevelopment())
           {
               spa.UseReactDevelopmentServer(npmScript: "start");
           }
       });