为什么本地开发用 HTTPS 会报证书错误? 南宫爱书 提问于 2026-03-05 13:48:19 阅读 28 前端 我在本地开发时启用了 HTTPS,但浏览器一直提示“您的连接不是私密连接”,点高级也过不去。我试过用 localhost 和 127.0.0.1 都不行,是不是得自己生成证书? 之前用的是 create-react-app,启动命令加了 HTTPS=true,但好像它自动生成的证书不被信任。有没有办法让浏览器信任这个本地证书,或者绕过这个错误? 我来解答 赞 6 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 设计师珂簪 Lv1 啊这个坑我踩过好几次,本地开发 HTTPS 确实烦人。create-react-app 那个自签名证书就是不被浏览器信任的,你需要自己搞个证书或者用 mkcert 这样的工具。 最方便的办法是用 mkcert,我本地开发都用这个: 1. 先装 mkcert(brew install mkcert 或者 choco install mkcert) 2. 跑 mkcert -install 生成根证书 3. 给 localhost 和 127.0.0.1 生成证书:mkcert localhost 127.0.0.1 4. 把生成的 .pem 文件配置到你的 dev server 如果是 create-react-app,你可以这样改 package.json: "scripts": { "start": "HTTPS=true SSL_CRT_FILE=./localhost.pem SSL_KEY_FILE=./localhost-key.pem react-scripts start" } 我之前傻傻地试过各种浏览器跳过警告的方法,后来发现还是正经搞证书靠谱。Chrome 现在越来越严格,直接忽略警告都不行了。 还有个土办法是在 Chrome 地址栏直接输入 thisisunsafe,能强行跳过警告,但每次刷新都要输一次,特别烦。 回复 点赞 7 2026-03-05 14:03 加载更多 相关推荐 1 回答 66 浏览 为什么本地 HTTPS 接口请求会被浏览器拦截? 我在本地用 Node.js 搭了个 HTTPS 服务,证书是自签名的,浏览器访问时点了“高级”→“继续前往”能打开页面。但页面里用 fetch 请求同一个域名的 API 时,却直接报错说不安全,连提示... 码农明艳 前端 2026-03-30 23:34:17 2 回答 22 浏览 前端怎么安全地管理 HTTPS 证书? 我在本地开发一个 React 应用,需要调用后端的 HTTPS 接口,但每次启动 dev server 都提示证书不被信任。我试过用 mkcert 生成本地 CA 和证书,也配到了 webpack-d... 亚美 安全 2026-03-04 23:19:16 2 回答 55 浏览 Charles抓包为什么看不到本地React开发的HTTPS请求? 我在用 create-react-app 搭建的项目里调用后端接口,本地启的是 https://localhost:3000,但 Charles 完全抓不到这些请求,明明代理已经开了,其他 HTTP ... 极客东旭 前端 2026-03-03 10:45:18 2 回答 91 浏览 为什么我的HTTPS页面加载时显示Mixed Content错误? 我在开发一个HTTPS网站时,发现用JavaScript请求HTTP接口会报Mixed Content错误。明明服务器已经配置了SSL证书,为什么还是不行? 比如这个请求代码: fetch('... UX栾同 前端 2026-02-15 19:59:29 1 回答 33 浏览 本地开发用 HTTPS 会影响 React 的 API 请求吗? 我最近在本地用 create-react-app 搭了个项目,为了测试某些需要 HTTPS 的功能(比如摄像头权限),就启用了 HTTPS 启动。但发现发请求到后端接口时老是失败,提示混合内容(mix... 令狐奥翔 前端 2026-03-26 11:22:22 2 回答 90 浏览 Security面板里为什么提示我的HTTPS页面有混合内容? 我在本地用 HTTPS 启动了一个开发服务器,页面也确实是通过 https://localhost:3000 加载的,但 Chrome DevTools 的 Security 面板一直报“Mixed ... 爱琴 Dev 工具 2026-03-03 17:44:20 2 回答 68 浏览 移动端HTTPS跳转后子页面显示证书错误怎么办? 我在开发电商小程序时遇到个奇怪的问题,主域名已经配置了HTTPS,但跳转到支付页面时浏览器突然提示NET::ERR_CERT_COMMON_NAME_INVALID。 支付页面是单独的子域名pay.e... IT人彦会 移动 2026-02-14 09:17:30 2 回答 101 浏览 Vue移动端HTTPS页面请求http接口导致Mixed Content错误怎么办? 我在开发Vue移动端应用时遇到了HTTPS问题,当页面切换到HTTPS后,调用本地测试接口时控制台报Mixed Content错误。尝试过在nginx配置强制HTTPS,但真机测试还是加载失败。 代码... 子晨的笔记 移动 2026-02-04 17:23:31 2 回答 82 浏览 为什么我的HTTPS页面加载图片时出现Mixed Content错误? 最近在开发一个电商页面,把网站部署成HTTPS后,发现图片加载失败了。控制台提示:Mixed Content 错误,但图片路径明明写对了啊! 代码是这样写的:<img src="http://e... 开发者秀丽 前端 2026-01-30 14:07:34 1 回答 56 浏览 Fiddler抓不到HTTPS请求怎么办? 我用 Fiddler 想抓本地开发环境的 HTTPS 接口,但完全看不到请求,HTTP 的能正常抓到。已经点了 Tools > Options > HTTPS 里的 Decrypt HTT... UI园园 前端 2026-03-17 22:39:19
最方便的办法是用 mkcert,我本地开发都用这个:
1. 先装 mkcert(brew install mkcert 或者 choco install mkcert)
2. 跑
mkcert -install生成根证书3. 给 localhost 和 127.0.0.1 生成证书:
mkcert localhost 127.0.0.14. 把生成的 .pem 文件配置到你的 dev server
如果是 create-react-app,你可以这样改 package.json:
我之前傻傻地试过各种浏览器跳过警告的方法,后来发现还是正经搞证书靠谱。Chrome 现在越来越严格,直接忽略警告都不行了。
还有个土办法是在 Chrome 地址栏直接输入 thisisunsafe,能强行跳过警告,但每次刷新都要输一次,特别烦。