React项目启动后Chrome访问localhost:3000提示安全连接无效如何修复

报错核心原因：当前启动的React本地开发服务运行在HTTP协议下，Chrome由于自身的HSTS缓存规则、地址自动补全逻辑，强制以HTTPS协议请求本地服务，TLS握手无法匹配就会返回This site can’t provide a secure connection localhost sent an invalid response的提示。

可按以下步骤逐一排查解决：

• 手动修正浏览器访问地址
  不要依赖Chrome的地址自动补全，手动在地址栏输入http://localhost:3000（确认地址前缀是http，没有多余的s），直接回车访问，多数情况下该操作就能解决问题。
• 清除Chrome针对localhost的强制HTTPS缓存规则
  在Chrome地址栏输入chrome://net-internals/#hsts进入内置的HSTS配置页面，找到「Delete domain security policies」板块的输入框，输入localhost后点击删除按钮，清除之前缓存的“强制对localhost使用HTTPS请求”的规则。
• 固定项目启动的协议配置
  如果需要彻底避免浏览器自动跳HTTPS的问题，可在项目根目录（projectone文件夹下）新建名为.env的配置文件，写入一行配置HTTPS=false，保存后终止当前运行的服务，重新执行npm start启动项目，此时服务会固定以HTTP模式运行，所有浏览器访问都不会触发HTTPS跳转逻辑。
• 排查代理类干扰
  如果完成上述操作仍报错，检查本地是否开启了系统代理、浏览器代理插件，这类工具的转发规则可能会把localhost的本地请求错误转发到外部网络，将localhost加入代理白名单、或临时关闭代理插件后重试即可。

说明：create-react-app生成的项目，早期版本默认以HTTP模式启动，新版会根据系统浏览器配置自动适配HTTPS，这也是Edge能正常打开、换Chrome就报错的核心原因。

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