获取 CORS 从 esp javascript 获取时出错

Question

I set up an ESP32 Webserver which provides me Sensor Values in.json Format. In Console i get the Error:

Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://10.0.0.40/sensor . (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Error: Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

What do I have to change?

// JavaScript source code
fetch('http://10.0.0.40/sensor')
    .then(response => response.json())
    .then(data => {

        var unit0 = data['0']['unit'];
        var unit1 = data['1']['unit'];

        var temperature = data['0']['value'];
        var humidity = data['1']['value'];

        document.getElementById("sensortemperature").innerHTML = temperature + unit0;
        document.getElementById("sensorhumidity").innerHTML = humidity + unit1;

        console.log(temperature + unit0);

    })

Answer 1

The error message indicates a CORS error:

Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://10.0.0.40/sensor . (Reason: CORS header 'Access-Control-Allow-Origin' missing).

The ESP32 webserver needs to enable CORS for the browser/client requesting your sensor data.

Your comment states you are using the ESP WebServer library. This provides an enableCORS() method (see https://github.com/espressif/arduino-esp32/blob/master/libraries/WebServer/src/WebServer.h#L127 ).

So you can enable CORS after you create the webserver like:

WebServer server();
server.enableCORS(true);