Question

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

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

我尝试过：

使用rejectUnauthorized:添加自定义https代理
在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方法。

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

1 个答案: