将URL从HTTP改为HTTPS时出现Axios SSL版本错误

问题描述 #

使用HTTP访问localhost或Windows服务器时代码正常运行，但切换为HTTPS后触发如下AxiosError：

AxiosError: write EPROTO 483E0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:355

相关代码：

const OTP_API = "https://192.168.4.10:8001/api/tatreports/getotp/";
const onNumberCheck = async () => {
    try {
      const response = await axios.get(
        `https://localhost:3005/api/is-user-exist/0${inputNumberValue}`
      );

      console.log(response);
      if (response.status === 200) {
        setIsUserExist(true);
        notification.success({
          message: ` سلام ${response.data.name}`,
          description:
            "کد احراز هویت برای شما ارسال شد. لطفا آن را وارد نمایید.",
        });
        setLoggedUserName(response.data.name);
        setLoggedUserAccessType(response.data.accessType);

        const otpRespons = await axios.get(`${OTP_API}${inputNumberValue}`);
        if (otpRespons.status === 200) {
          setValidationCode(otpRespons.data);
          console.log(otpRespons.data);
        }else{
          notification.error({
            message: `مشکلی پیش آمده`,
            description: "لطفا ارتباط با سرویس پیامکی را چک کنید و یا با پشتیبانی تماس بگیرید",
          });
        }
      }else if(response.status === 403){
        notification.error({
          message: `این شماره اجازه دسترسی ندارد`,
          description: "لطفا با پشتیبانی تماس بگیرید",
        });
      }
    } catch (error) {
      if (error.response) {
        const statusCode = error.response.status;
        console.error(`Request failed with status code: ${statusCode}`);
        notification.error({
          message: `این شماره اجازه دسترسی ندارد`,
          description: "لطفا با پشتیبانی تماس بگیرید222",
        });
      } else if (error.request) {
        notification.error({
          message: `No response received from the server.`,
          description: "لطفا با پشتیبانی تماس بگیرید",
        });
        console.error("");
      } else {
        notification.error({
          message: `Error setting up the request:`,
          description: `${error.message}`,
        });
      }
    }
  };

错误原因 #

• 服务器未配置HTTPS：目标服务器（如localhost:3005或192.168.4.10:8001）可能仅开启了HTTP服务，未配置SSL证书和HTTPS监听。当用HTTPS请求时，服务器返回HTTP响应，导致SSL握手失败，触发版本号错误。
• 端口与协议不匹配：HTTPS默认端口是443，若服务器在8001、3005等端口运行的是HTTP服务，强行用HTTPS访问这些端口会导致协议冲突。
• SSL/TLS版本不兼容：客户端与服务器支持的SSL/TLS版本不匹配，比如服务器仅支持旧版本（如SSL3）但客户端已禁用，或反之。
• 证书问题：服务器使用的SSL证书无效、过期、域名不匹配，或未被客户端信任，导致握手失败。

解决办法 #

1. 确认服务器HTTPS配置 #

• 检查目标服务器是否已正确配置HTTPS：确认服务器已加载SSL证书，且监听对应的HTTPS端口（默认443，自定义端口需与服务器配置一致）。
• 若服务器仅支持HTTP，要么将请求改回HTTP，要么为服务器配置HTTPS（开发环境可使用自签名证书，生产环境需用正规CA颁发的证书）。

2. 修正端口与协议的匹配 #

• 确保HTTPS请求指向服务器的HTTPS端口，比如服务器在3006端口开启HTTPS，则请求URL应为https://localhost:3006/api/is-user-exist/...，而非原来的3005（若3005是HTTP端口）。

3. 处理开发环境的自签名证书 #

开发环境使用自签名证书时，Axios默认会拒绝，可临时配置忽略证书验证（仅开发环境使用，生产环境绝对禁止）：

// 创建Axios实例时配置httpsAgent
const axiosInstance = axios.create({
  httpsAgent: new require('https').Agent({ rejectUnauthorized: false })
});

// 后续请求使用该实例
const response = await axiosInstance.get(`https://localhost:3005/api/is-user-exist/0${inputNumberValue}`);

4. 调整SSL/TLS版本兼容 #

若因版本不匹配导致错误，可指定Axios使用的SSL版本，比如强制使用TLSv1.2：

const https = require('https');
const axiosInstance = axios.create({
  httpsAgent: new https.Agent({
    secureProtocol: 'TLSv1_2_method'
  })
});

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