Netlify部署ESP32 HTTP接口混合内容拦截问题求助

核心错误原因 #

你遇到的Mixed Content错误是浏览器安全机制限制：HTTPS协议的页面不允许发起HTTP协议的请求，因此Netlify部署的HTTPS网站调用本地ESP32的HTTP接口会被直接拦截。

而你用Netlify _redirect 配置失效，存在两个关键问题：

1. 重定向规则本身的错误 #

你的配置和实际需求完全不匹配：

• 规则目标地址写的是 http://192.168.118.41/section-color/fire，但你实际需要调用的是 /custom-color 接口，路径完全不符
• 规则路径为 /h/*，但你请求的是 /h，通配符写法可能无法匹配根路径 /h

2. 本质逻辑错误 #

Netlify服务器部署在公网，无法访问你本地局域网的 192.168.118.41 地址——公网服务没有权限进入私有局域网，所以即使重定向规则写对，请求也会因为找不到目标服务器而失败。

可行解决方案 #

方案一：内网穿透+HTTPS（推荐） #

将本地ESP32服务暴露为公网HTTPS地址，既解决混合内容问题，又让公网网站能正常调用：

1. 选择内网穿透工具（如Ngrok、花生壳），以Ngrok为例：
   • 下载安装后运行命令 ngrok http 80（假设ESP32的HTTP服务端口为80）
   • 工具会生成临时公网HTTPS地址，比如 https://abc123.ngrok.io
2. 修改前端代码，直接调用该HTTPS地址：

   const r = 115, g = 122, b = 255;
   const apiUrl = `https://abc123.ngrok.io/custom-color?r=${r}&g=${g}&b=${b}`;
   await fetch(apiUrl);
   

3. 注意：Ngrok免费版地址会随机变化，长期使用可选择付费版或支持固定域名的内网穿透服务。

方案二：临时允许浏览器混合内容（仅测试用） #

仅适合本地调试，不适合正式上线：

• 在Chrome地址栏点击左侧锁图标，选择「不安全」→「允许不安全内容」
• 此方式会降低网站安全性，仅用于临时测试。

方案三：本地运行前端服务 #

放弃Netlify部署，在本地运行前端项目（如npm run start），此时前端页面为HTTP协议，调用ESP32的HTTP接口不会触发混合内容限制。

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