无法从 VUE 向 ESP32 https 服务器发出 POST 请求

Question

我正在尝试从 vue Web 应用程序向 ESP32 https 服务器发出 POST 请求。 由于自签名证书，该请求始终被 CORS 阻止。

1. ESP32 以 AP 模式启动，生成自己的 Wifi 网络。
2. 带有我生成的 SSL 证书的 https 服务器开始运行（使用此库：https://github.com/fhessel/esp32_https_server）
3. 在本地运行 VUE 应用程序的 PC 中，我向 ESP32 服务器发出 POST 请求（参见下面的代码） （我正在使用 axios 发出请求）

我试过了：

• 使用rejectUnauthorized: 添加自定义 https 代理
• 在 ESP32 服务器使用的 POST 请求中添加相同的证书
• 添加 CORS 标头
• 添加process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"
• 在 https 模式下使用 ESP32 相同的证书启动 vue 开发服务器
• 尝试在 ESP32 服务器中获取 OPTIONS 请求以允许 POST 请求

使用 curl 或 postman 发出请求可以正常工作！这就像浏览器或 vue 的问题。

const httpsAgent = new https.Agent({
  rejectUnauthorized: false,
});

axios.post(`https://192.168.4.1/config?ssid=${this.ssid}&ssidkey=${this.password}`, { httpsAgent })
          .then((res) => {
            ...
          });

目标是首先在 AP 模式下通过直接连接到 ESP32 来配置我的 WiFi 凭据。 如果我使用 curl 或 Postman 来使请求正常工作，ESP32 会接收 WiFi 凭据并连接到我的路由器，但我无法使用 vue Web 应用程序进行相同的操作...

Answer 1

您可以在 Mozilla 开发者页面上找到有关 CORS 机制如何工作的完整详细信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

总之，浏览器会自动执行一个 HTTP 请求，使用 OPTIONS 方法，与你对服务器的原始请求的 url 相同，这个请求是无法避免的。浏览器期望此请求以状态 200 和 CORS 标头响应（例如： Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400 )

一旦接收到对 OPTIONS 方法的响应并且看起来对浏览器有效，您的原始请求将由浏览器执行。

因此，您需要配置服务器以使用 cors 标头响应 options 方法。