React前端通过Axios调用带自签名证书的API请求失败排查

核心原因 #

你在axios里配置的httpsAgent是Node.js专属API，浏览器环境中不存在这个对象，所以rejectUnauthorized: false的配置完全无效。浏览器的证书验证由自身安全策略控制，前端JS代码没有权限修改这一逻辑，这就是各种axios/fetch配置都不起作用的原因。

可行解决方案 #

• 手动信任设备证书：直接在浏览器中访问IoT设备的HTTPS地址（如https://设备本地IP），浏览器会提示证书不安全，手动添加信任（不同浏览器操作不同，比如Chrome需点击「高级」→「继续访问」）。信任后，前端再发起请求就不会被拦截。
• 后端代理转发：前端统一通过你的HTTPS后端请求视频，后端（Node.js环境）再调用IoT设备的HTTPS接口，此时后端可以设置rejectUnauthorized: false跳过证书验证，然后将视频流返回给前端。这种方式既规避了浏览器的证书限制，又保证了前端与后端的同域HTTPS通信。
• 使用内部CA签发证书：如果是企业内部部署场景，可以搭建内部证书颁发机构（CA），给IoT设备签发受信任的证书，再将CA根证书部署到用户的浏览器或操作系统信任列表中。这样设备证书会被浏览器自动信任，无需用户手动操作。

补充说明 #

fetch方法同样无法绕过浏览器的证书验证，这是浏览器的底层安全机制，前端代码无权干预。你之前解决mixed content问题的思路是对的（把设备改成HTTPS），但现在的问题是自签名证书不被浏览器信任，属于另一个安全限制范畴。

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