Can´t make POST request from VUE to ESP32 https server

Question

I´m trying to make a POST request from a vue web app to a ESP32 https server. The request is always blocked by CORS because self-signed certificates.

1. ESP32 Starts in AP mode, generating his own Wifi network.
2. An https server, with SSL certificates generated by me, starts running (using this library: https://github.com/fhessel/esp32_https_server )
3. In a PC running locally the VUE app, I make the POST request to the ESP32 server (see code below) (I´m using axios to make the request)

I have tried:

• Adding a custom https aggent with rejectUnauthorized:
• Adding same cert in POST request that ESP32 server uses
• Adding CORS headers
• Adding process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"
• Starting vue dev server in https mode with ESP32 same certs
• Try to obtain the OPTIONS request in ESP32 server to allow the POST request

Making the request with curl or postman works fine!! It´s like a problem with the browser or 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) => {
            ...
          });

The goal is to configure my WiFi credentials by conecting directly to the ESP32 in AP Mode first. If I use curl or Postman to make the request its working fine, the ESP32 receive WiFi credentials and connect to my router, but it has been impossible to me to make the same with the vue web app...

Answer 1

You can find the full details of how the CORS mechanism works on the mozilla developers page: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

In summary, the browser automatically performs an HTTP request with the method OPTIONS with the same url of your original request to your server, and this request can't be avoid. The browser expect that this request responds with a status 200 and with the CORS headers ( for example: 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 )

Once the response to the method OPTIONS is receive and looks valid for the browser, your original request is performed by the browser.

So, you need to configure your server to responde to the options method with the cors headers.