React中POST请求出现net::ERR_SSL_PROTOCOL_ERROR的解决求助

你已通过config-overrides.js解决Webpack 5缺失Node.js polyfill的问题，但仍出现net::ERR_SSL_PROTOCOL_ERROR，该错误本质是客户端与服务端SSL/TLS协议握手失败，和之前的polyfill问题无关，以下是针对性排查和解决方向：

核心原因及对应解决方法 #

1. 服务端SSL证书不匹配 #

你使用裸IP（212.113.123.140:83）发起HTTPS请求，而绝大多数SSL证书是绑定域名而非裸IP的，浏览器会直接判定证书无效，触发协议错误。

• 解决：
  • 测试环境下，先手动访问https://212.113.123.140:83，在浏览器安全提示中选择信任该证书；
  • 若服务端实际未配置HTTPS，直接改用http://212.113.123.140:83/login/发起请求。

2. 端口与协议不匹配 #

部分服务端会将83端口配置为HTTP端口而非HTTPS，用HTTPS请求会直接导致协议握手失败。

• 解决：切换为HTTP协议请求，验证服务端是否正常响应。

3. 浏览器端HTTPS Agent配置无效 #

你在浏览器环境中使用Node.js的https.Agent，但浏览器有独立的SSL处理逻辑，https-browserify的polyfill无法完全模拟Node.js的Agent配置，rejectUnauthorized: false在浏览器中不生效。

• 解决：移除代码中https模块的导入和httpsAgent配置，让浏览器自动处理SSL连接；若需忽略证书错误，只能通过浏览器手动信任操作。

4. 请求头配置冗余错误 #

手动设置"Content-Type": "multipart/form-data"会覆盖axios自动生成的带boundary的正确请求头，可能导致请求格式异常，被浏览器误判为SSL错误。

• 解决：删除config.headers中的Content-Type配置，让axios自动处理表单请求头。

调整后的请求代码示例 #

import axios from "axios";
import FormData from "form-data";

export const login = async (username, password) => {
    const formData = new FormData();
    formData.append("username", username);
    formData.append("password", password);

    const config = {};

    try {
        // 先尝试HTTP请求验证服务端配置
        const response = await axios.post("http://212.113.123.140:83/login/", formData, config);
        return response.data;
    } catch (error) {
        console.error("登录错误:", error);
        throw error;
    }
}

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