没有不值得去解决的问题,也没有不值得去学习的技术!

在 Postman 中请求 https 接口响应成功,在前端页面中请求 https 接口无响应,控制台中报错: net::ERR_CERT_AUTHORITY_INVALID

在 Postman 中请求 https 接口响应成功,在前端页面中请求 https 接口无响应,控制台中报错: net::ERR_CERT_AUTHORITY_INVALID

1、在 Postman 中请求 https 接口响应成功,在前端页面中请求 https 接口无响应,控制台中报错: net::ERR_CERT_AUTHORITY_INVALID。如图1

在 Postman 中请求 https 接口响应成功,在前端页面中请求 https 接口无响应,控制台中报错: net::ERR_CERT_AUTHORITY_INVALID
图1

2、原因:浏览器不信任 mkcert 证书,因为它是由本地 CA(Certificate Authority)签发的,并未被操作系统或浏览器默认信任。使用以下命令检查:CA 证书 是否已经安装。确认未安装。如图2

原因:浏览器不信任 mkcert 证书,因为它是由本地 CA(Certificate Authority)签发的,并未被操作系统或浏览器默认信任。使用以下命令检查:CA 证书 是否已经安装。确认未安装。
图2
Plaintext

PS C:\wwwroot> certutil -store -user root "mkcert development CA"
root "受信任的根证书颁发机构"
CertUtil: -store 失败: 0x80090011 (-2146893807 NTE_NOT_FOUND)
CertUtil: 找不到对象。
PS C:\wwwroot>

3、运行 certlm.msc(本地计算机证书管理器)。在 受信任的根证书颁发机构 下,检查是否有 mkcert development CA 证书。不存在。如图3

运行 certlm.msc(本地计算机证书管理器)。在 受信任的根证书颁发机构 下,检查是否有 mkcert development CA 证书。不存在
图3

4、将 C:\Users\wangqiang\AppData\Local\mkcert\rootCA.pem 证书导入到 受信任的根证书颁发机构。如图4

将 C:\Users\wangqiang\AppData\Local\mkcert\rootCA.pem 证书导入到 受信任的根证书颁发机构
图4

5、信任 CA 证书 Chrome / Edge 进入 chrome://settings/certificates。选择 “本地证书” 选项卡 – 查看从 Windows 导入的证书,查看是否包含 mkcert 生成的 CA 证书。已经包含,重启浏览器。如图5

信任 CA 证书 Chrome / Edge 进入 chrome://settings/certificates。选择 “本地证书” 选项卡 - 查看从 Windows 导入的证书,查看是否包含 mkcert 生成的 CA 证书。已经包含,重启浏览器
图5

6、再次请求,报错:Access to XMLHttpRequest at ‘https://api.apply.local/sms/get-login-verify-code’ from origin ‘https://console.apply.local’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 如图6

再次请求,报错:Access to XMLHttpRequest at 'https://api.apply.local/sms/get-login-verify-code' from origin 'https://console.apply.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
图6

7、从来源“https://console.apply.local”访问“https://api.apply.local/sms/get-login-verify-code”处的 XMLHttpRequest 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。如图7

从来源“https://console.apply.local”访问“https://api.apply.local/sms/get-login-verify-code”处的 XMLHttpRequest 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。
图7

8、在服务端设置响应 Access-Control-Allow-Origin https://console.apply.local ,控制台中也不再报错。如图8

在服务端设置响应 Access-Control-Allow-Origin https://console.apply.local ,控制台中也不再报错
图8

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系