react-create-app：localhost:3000跳HTTPS报ERR_SSL_PROTOCOL_ERROR

这种异常和react-create-app本身的配置、当前node v14.16.0 / npm 6.14.11的运行环境没有直接关联，本质是浏览器针对localhost域持久缓存了HSTS（HTTP严格传输安全）强制跳转规则：

• 规则触发后，只要访问localhost下的HTTP地址，浏览器会自动替换成HTTPS协议发起请求，而本地3000端口跑的是纯HTTP服务，没有配置SSL证书，因此抛出ERR_SSL_PROTOCOL_ERROR
• 局域网IP（如192.168.1.30）不在HSTS规则的生效范围内，所以可以正常访问
• 你之前验证的“DevTools禁用缓存后可临时正常访问”的表现，完全符合HSTS规则的存储特性：该规则是持久化写入浏览器本地存储的，禁用缓存仅能在当前打开的浏览器会话中跳过规则加载，一旦关闭重启浏览器，规则会从本地存储重新被读取，强制跳转的问题就会复现，因此不具备长期有效性

• 第一步：清理浏览器存量的localhost HSTS规则
  直接在Chrome地址栏访问内部配置页chrome://net-internals/#hsts，找到「Delete domain security policies」板块，输入localhost后点击删除，清除浏览器里存的旧强制跳转规则；Firefox用户可直接访问内部设置页about:preferences#privacy，在HTTPS-Only模式的例外列表里找到所有和localhost相关的条目，手动删除即可。
• 第二步：固化项目启动配置，从服务端层面避免HSTS规则写入
  适配你当前node14版本的react-scripts（4.x分支）支持通过环境变量控制启动协议，修改package.json里的启动脚本：
  • macOS/Linux环境：把默认启动脚本改为HTTPS=false react-scripts start
  • Windows CMD环境：把默认启动脚本改为set HTTPS=false && react-scripts start
    这种显式指定HTTP模式的启动方式，会在服务响应头中明确告知浏览器不需要为当前地址写入强制HTTPS规则，从根源上避免问题复现。
• 第三步：调整浏览器全局HTTPS强制策略
  关闭Chrome、Firefox中针对所有地址默认启用的HTTPS-First模式，避免浏览器主动为未配置HTTPS的localhost地址自动添加强制跳转缓存，从浏览器侧切断规则生成的来源。

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