本地主机SSL端口与React Webpack错误端口不一致问题排查

端口54082的来源 #

这个随机端口是webpack-dev-server在开发模式下自动分配的可用端口，用于前端热重载（HMR）的WebSocket通信。ASP.NET Core React模板启动时会同时运行两个服务：

• ASP.NET Core后端服务，对应launchsettings.json中配置的https://localhost:5001和http://localhost:5000
• webpack-dev-server前端开发服务，默认会随机选取一个未被占用的端口，用于实时推送代码更新到浏览器，这个端口会被注入到动态生成的bundle.js中，也就是你看到的port=51359这类参数。

为什么会出现SSL协议错误 #

你的前端页面运行在HTTPS环境（https://localhost:5001），但webpack-dev-server默认使用HTTP协议的WebSocket（ws://）。浏览器出于安全限制，会强制要求HTTPS页面中的WebSocket连接使用加密的wss://协议，而未配置SSL的webpack-dev-server无法响应wss://请求，因此抛出ERR_SSL_PROTOCOL_ERROR。

解决步骤 #

结合你的环境（Node v12.19.0、Zscalar防火墙、无法升级Node/修改系统环境变量），可以按以下方式处理：

1. 配置webpack-dev-server启用HTTPS并指定固定端口 #

根据你的项目模板类型，选择对应配置方式：

方式一：直接修改webpack配置文件

如果项目ClientApp文件夹内有webpack.config.js或webpack.development.config.js，添加/修改devServer配置：

const fs = require('fs');
const path = require('path');

module.exports = {
  // 其他配置...
  devServer: {
    https: true, // 启用HTTPS
    port: 54082, // 指定固定端口（可替换为你需要的端口）
    host: 'localhost', // 避免使用0.0.0.0，防止防火墙拦截
    disableHostCheck: true, // 禁用主机检查，适配开发环境
    client: {
      webSocketURL: 'wss://localhost:54082/ws' // 明确指定WebSocket的wss地址
    },
    // 可选：复用ASP.NET Core生成的自签名证书（如果有）
    key: fs.readFileSync(path.resolve(__dirname, '../localhost.key')),
    cert: fs.readFileSync(path.resolve(__dirname, '../localhost.crt'))
  }
};

方式二：通过package.json脚本配置（使用react-scripts的模板）

如果项目使用react-scripts启动前端，修改ClientApp/package.json中的start脚本，添加HTTPS和端口参数：

{
  "scripts": {
    "start": "HTTPS=true PORT=54082 react-scripts start"
  }
}

2. 配置ASP.NET Core代理WebSocket请求 #

确保ASP.NET Core将前端的WebSocket请求代理到配置好的webpack-dev-server端口：

• .NET 6+（Program.cs）：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        // 替换为你指定的webpack-dev-server地址
        spa.UseProxyToSpaDevelopmentServer("https://localhost:54082");
    }
});

• .NET 5及以前（Startup.cs）：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件配置...

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseProxyToSpaDevelopmentServer("https://localhost:54082");
        }
    });
}

3. 适配Zscalar防火墙 #

• 确保项目解决方案属性中配置的NO_PROXY=localhost,127.0.0.1生效，避免webpack-dev-server的请求被防火墙拦截
• 若仍有问题，可在webpack-dev-server配置中添加allowedHosts: 'all'（Node 12支持该配置），放宽主机访问限制

注意事项 #

• 你之前修改iisSettings中的sslPort为0，这是IIS Express的配置，和webpack-dev-server的端口无关，因此不会解决该问题
• NODE_TLS_REJECT_UNAUTHORIZED=0仅能让Node忽略证书有效性错误，但无法解决协议不匹配的问题，必须确保webpack-dev-server启用HTTPS才能使用wss://协议

内容的提问来源于stack exchange，提问作者Lynda