请求localhost:4000自定义API报net::ERR_SSL_PROTOCOL_ERROR错误

这个ERR_SSL_PROTOCOL_ERROR是协议不匹配导致的：你前端代码里写的请求前缀是https，但本地4000端口运行的后端服务没有配置SSL/TLS证书，默认只提供HTTP服务，浏览器发起HTTPS握手时直接被服务端拒绝，就会抛这个错。
Postman能正常请求不代表服务端支持HTTPS：Postman默认关闭了严格SSL校验，部分版本还会在HTTPS请求失败时自动降级为HTTP重试，所以你在Postman里测的时候感知不到协议问题，但浏览器对协议匹配、证书有效性的校验非常严格，不会做自动降级，只要地址写了HTTPS就必须完成TLS握手，失败就直接报错。

根据你的开发场景二选一即可：

• 普通本地开发场景（不需要测HTTPS专属特性比如Secure Cookie、PWA、WebCrypto等）：直接修改前端请求地址，把https://localhost:4000/trainings改成http://localhost:4000/trainings，去掉https里的s就行，改完刷新页面就能正常请求。
• 必须使用HTTPS的本地开发场景：给本地后端服务配置自签名SSL证书，操作步骤如下：
  1. 安装mkcert工具（专门用来生成本地信任的自签名证书，比openssl生成的证书不会被浏览器标记为不安全），安装完成后在项目目录执行命令生成本地证书：

     mkcert localhost
     

     执行后会在当前目录生成localhost.pem（公钥证书）和localhost-key.pem（私钥）两个文件。
  2. 修改后端服务启动代码，替换原来的HTTP启动逻辑为HTTPS，以Express框架为例：

     const https = require('https');
     const fs = require('fs');
     const express = require('express');
     const app = express();
     
     // 保留你原有的中间件、路由配置不变
     
     const sslOptions = {
       key: fs.readFileSync('./localhost-key.pem'),
       cert: fs.readFileSync('./localhost.pem')
     };
     
     https.createServer(sslOptions, app).listen(4000, () => {
       console.log('HTTPS 服务已启动在 4000 端口');
     });
     

  3. 把两个证书文件加入.gitignore，不要提交到公共代码仓库。

额外提个排查注意点：本地调试前端接口问题时，Postman的结果只能做参考，它的很多自动兼容逻辑（比如SSL校验跳过、协议自动降级、自动补全请求头）会掩盖真实问题，优先以浏览器Network面板的实际请求表现为准。

内容的提问来源于stack exchange，提问作者Isaac Martí