HTTPS网站无法向ESP32的HTTP服务器发送GET请求如何解决？

问题核心是浏览器的混合内容安全策略：HTTPS页面中发起HTTP请求会被浏览器直接拦截，这是默认的安全限制，和你是否需要响应无关。以下是几个可行的解决办法：

方案1：给ESP32配置HTTPS服务器 #

让ESP32运行HTTPS服务，使请求协议和网站一致，浏览器就不会拦截。

• 用OpenSSL生成自签名SSL证书：

  openssl req -x509 -newkey rsa:2048 -keyout private.key -out certificate.crt -days 365 -nodes
  

• 在ESP32代码中加载证书和密钥，改用HTTPS服务器（以Arduino框架为例）：

  #include <WiFi.h>
  #include <WiFiSecure.h>
  
  const char* ssid = "你的WiFi名称";
  const char* password = "你的WiFi密码";
  const char* cert = R"EOF(
  -----BEGIN CERTIFICATE-----
  // 粘贴生成的certificate.crt内容
  -----END CERTIFICATE-----
  )EOF";
  const char* private_key = R"EOF(
  -----BEGIN PRIVATE KEY-----
  // 粘贴生成的private.key内容
  -----END PRIVATE KEY-----
  )EOF";
  
  const int LED_PIN = 2;
  WiFiSecureServer server(443);
  
  void setup() {
    pinMode(LED_PIN, OUTPUT);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) delay(500);
    
    server.setCACert(cert);
    server.setPrivateKey(private_key);
    server.begin();
  }
  
  void loop() {
    WiFiClientSecure client = server.available();
    if (client && client.connected()) {
      String request = client.readStringUntil('\r');
      if (request.indexOf("GET /on") != -1) {
        digitalWrite(LED_PIN, HIGH);
      }
      client.stop();
    }
  }
  

• 注意：自签名证书在浏览器中会被标记为不安全，首次访问ESP32的HTTPS地址时需要手动信任；公网使用可申请Let's Encrypt免费证书（需确保ESP32支持证书更新）。

方案2：在HTTPS服务器上配置反向代理 #

通过你的网站服务器（如Nginx、Apache）做反向代理，将HTTPS请求转发到ESP32的HTTP服务，前端只需请求同域名的HTTPS路径。

• 以Nginx为例，在配置文件中添加代理规则：

  server {
    listen 443 ssl;
    server_name 你的域名.com;
    // 已有的HTTPS证书、密钥配置
  
    location /esp32/ {
      proxy_pass http://ESP32本地IP:ESP32端口/;
      proxy_set_header Host $host;
    }
  }
  

• 重启Nginx后，前端请求https://你的域名.com/esp32/on即可，服务器会自动转发到ESP32的HTTP接口，浏览器不会拦截。

方案3：利用资源标签触发无响应请求（临时测试方案） #

如果不想修改服务器或ESP32配置，可尝试用<img>标签发起请求（部分严格模式浏览器仍会拦截，仅适合测试）：

• 前端代码示例：

  function turnOnLight() {
    // 添加随机参数避免浏览器缓存
    const random = Math.random().toString(36).slice(2);
    const img = new Image();
    img.src = `http://你的路由器公网IP/on?rand=${random}`;
    // 无需处理加载结果，请求发出即完成触发
  }
  

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