React应用npm start触发Chrome「您的连接不是私密连接」如何从应用侧修复

数据老陈

2026-9-26

React开发环境HTTPS安全提示修复方案

核心逻辑

Chrome的安全提示源于本地HTTPS服务使用了未被系统信任的自签名证书，只需生成被本地系统信任的证书并配置到开发服务器即可解决，无需修改Chrome flags，一次配置全团队生效。

具体操作步骤

前置准备（所有开发人员一次性环境配置）

安装本地证书生成工具mkcert：

Mac设备执行brew install mkcert
Windows设备执行choco install mkcert
Linux设备对应发行版用自带包管理器安装即可

安装完成后执行mkcert -install，会自动将mkcert的根证书添加到系统和浏览器的信任列表。

项目层面通用配置

根据项目构建工具做对应配置：

如果是Create React App项目，在根目录新建.env文件添加如下配置：

HTTPS=true
SSL_CRT_FILE=./cert/localhost.crt
SSL_KEY_FILE=./cert/localhost.key

如果是自定义Webpack项目，修改webpack-dev-server配置：

const path = require('path')
module.exports = {
  // 其余配置省略
  devServer: {
    https: {
      cert: path.resolve(__dirname, './cert/localhost.crt'),
      key: path.resolve(__dirname, './cert/localhost.key')
    }
  }
}

如果是Vite构建的React项目，修改vite.config.js：

export default defineConfig({
  // 其余配置省略
  server: {
    https: {
      cert: './cert/localhost.crt',
      key: './cert/localhost.key'
    }
  }
})

在项目package.json中添加前置执行脚本，自动生成本地证书：

{
  "scripts": {
    "prestart": "mkdir -p cert && mkcert -cert-file cert/localhost.crt -key-file cert/localhost.key localhost",
    "start": "react-scripts start" // 保留原本的start命令即可
  }
}