0

i am working on an ESP32 project. one of my goals is to communicate with the ESP32 from a website using javascript fetch or XMLHttpRequest().

the ESP32 is connected to my local network and i am using the esp32_https_server library. it uses a self-signed certificate which the browser indicates as valid (but issues a warning, "Connection not protected" due to the self-signed certificate). the website has a CA certificate and is secure.

in testing, the esp32 is conected via USB to my computer, idealy i would like it to stand alone.

the problem i am experiencing is that i cannot seem to connect to the esp32. i keep getting status code 499 errors.

my questions are:

1) how do i successfully connect to the esp32 server from a secure website to get data frome the esp32?

2) how do i do this when the esp32 is not connected to my pc via the usb cable?

please see more info regarding the esp32 set up and responses below.

here's the esp32 code:

ResourceNode *nodeRoot = new ResourceNode("/", "GET", [](HTTPRequest *req, HTTPResponse *res) {
    ResourceParameters *params = req->getParams();
    std::string action = params->getRequestParameter("action");

    String aksie = action.c_str();

    Serial.println("Aksie: " + aksie);

    if (aksie != "upload_data" && aksie != "upload_current_temp")
    {
        // this should be home page displayed
        // Set the response status
        res->setStatusCode(200);
        res->setStatusText("success");
        res->println("Secure Hello World!!!");
    }
    else
    {
        // either uploads..
        processParams(aksie, res);
    }
});

secureServer->registerNode(nodeRoot);

and here's the code that processes the "upload_current_temp" request:

if (action == "upload_current_temp")
{
    // get random temperature
    int currentTemp = random(0, 9);
    String temp = String(currentTemp);

    Serial.println("upload current temperature");
    Serial.println("uploadCurrentTemp: " + temp);
    std::string tem = temp.c_str();
    // Set the response status
    res->setStatusCode(200);
    res->setStatusText("success current temperature");

    StaticJsonDocument<200> doc;
    doc["temperature"] = temp;
    // Produce a minified JSON document
    String output;
    serializeJson(doc, output);
    Serial.println("curent temp json output: " + output);

    deserializeJson(doc, output);

    // Set the content type of the response
    res->setHeader("Content-Type", "application/json");
    res->setHeader("Access-Control-Allow-Origin", "*");
    res->setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS");

    // As HTTPResponse implements the Print interface, this works fine. Just remember
    // to use *, as we only have a pointer to the HTTPResponse here:
    serializeJson(doc, *res);
}

and also in setUp() i have this line:

secureServer->setDefaultHeader("Access-Control-Allow-Origin", "*"); //replace * with actual address

when using:

 const xhr = new XMLHttpRequest();
    const url = 'https://192.168.0.102/?action=upload_current_temp';

    xhr.open('GET', url);

    xhr.responseType = 'text';
    xhr.onload = function () {

        const data = xhr.response;
        console.log(data);

        if (this.readyState == 4 && this.status == 200) {
            var obj = JSON.parse(this.responseText);
            console.log("getCurTemp(), responseText: " + JSON.stringify(this.responseText, null, 2));
            currentTemperature = obj.temperature;
            console.log("current temperature: " + currentTemperature);
            document.getElementById('currentTemp').innerHTML = currentTemperature;
        }
    };
    xhr.send();

i get these errors (in opera):

499 (Request has been forbidden by antivirus)

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and in chrome:

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

with these headers (opera):

Request URL: https://192.168.0.102/?action=upload_current_temp Request Method: GET

Status Code: 499 Request has been forbidden by antivirus

Remote Address: 192.168.0.102:443

Referrer Policy: no-referrer-when-downgrade

Cache-Control: no-store, no-cache, must-revalidate, max-age=0

Connection: close

Content-Length: 52266

Content-Type: text/html; charset=utf-8

Expires: Mon, 04 Dec 1999 21:29:02 GMT

Pragma: no-cache

Accept: /

Accept-Encoding: gzip, deflate, br

Accept-Language: en-US,en;q=0.9

Connection: keep-alive

Host: 192.168.0.102

Origin: https://istimuli.co.uk

Referer: https://istimuli.co.uk/?code=66b72f8e-400c-4adb-ad42-f4efec391d06

Sec-Fetch-Dest: empty

Sec-Fetch-Mode: cors

Sec-Fetch-Site: cross-site

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36 OPR/67.0.3575.79

action: upload_current_temp

and when using :

var url = "https://192.168.0.102/?action=upload_current_temp";

    var request = new Request(url, {
        method: 'GET',
        mode: 'cors', // no-cors, *cors, same-origin
        headers: {
            'Content-Type': 'application/json'
        }
    });

    fetch(request).then(function (response) {
        // Convert to JSON
        return response.json();
    }).then(function (data) {
        console.log("temp: " + JSON.stringify(data));
        return data;
    }).catch(function (error) {
        console.log('Request failed', error)
        return 000;
    });

i get these errors in opera:

499 (Request has been forbidden by antivirus)

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

and in chrome: has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

and these are the headers (opera):

1 requests

51.3 KB transferred

51.0 KB resources

Request URL: https://192.168.0.102/?action=upload_current_temp

Request Method: OPTIONS

Status Code: 499 Request has been forbidden by antivirus

Remote Address: 192.168.0.102:443

Referrer Policy: no-referrer-when-downgrade

Cache-Control: no-store, no-cache, must-revalidate, max-age=0

Connection: close

Content-Length: 52266

Content-Type: text/html; charset=utf-8

Expires: Mon, 04 Dec 1999 21:29:02 GMT

Pragma: no-cache

Accept: /

Accept-Encoding: gzip, deflate, br

Accept-Language: en-US,en;q=0.9

Access-Control-Request-Headers: content-type

Access-Control-Request-Method: GET

Connection: keep-alive

Host: 192.168.0.102

Origin: https://istimuli.co.uk

Referer: https://istimuli.co.uk/?code=66b72f8e-400c-4adb-ad42-f4efec391d06

Sec-Fetch-Dest: empty

Sec-Fetch-Mode: cors

Sec-Fetch-Site: cross-site

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36 OPR/67.0.3575.79

action: upload_current_temp

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
idig
  • 301
  • 1
  • 12
  • 1
    The CORS errors aren’t relevant. For a 499 or any 4xx error, it’s normal and expected that the response won’t include the Access-Control-Allow-Origin response header. – sideshowbarker Mar 19 '20 at 15:06
  • okay, so just learnt that if i first open the esp32's web server page in the same browser instance that i open the website, then i am able to communicate with the esp32 from the browser using XMLHttpRequest(). so how to i communicate with the esp32 without first opening the esp32 server page? how to do it without the esp connected to Pc? – idig Mar 19 '20 at 15:28

0 Answers0