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

Question

我正在尝试从 vue 网络应用程序向 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 rejectUnauthorized:
• 在 ESP32 服务器使用的 POST 请求中添加相同的证书
• 添加 CORS 标头
• 添加process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"
• 使用 ESP32 相同证书以 https 模式启动 vue 开发服务器
• 尝试在 ESP32 服务器中获取 OPTIONS 请求以允许 POST 请求

使用 curl 或邮递员发出请求工作正常！！ 这就像浏览器或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

综上所述，浏览器会自动执行一个带有方法 OPTIONS 的 HTTP 请求，其 url 与您对服务器的原始请求的 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 方法。