如何解决 ESP32 异步网络服务器 cors 错误

Question

我正忙着在家里用 fastled 做一个项目。我有一个运行异步网络服务器的 esp32，我想通过反应网页向它发出请求。

当我单击按钮运行此代码时：

function EffectBasic () {

     function handleChangeEffect() {
         var xhttp = new XMLHttpRequest();
         xhttp.open("GET", "http://192.168.0.165/Rainbow", true);
         xhttp.setRequestHeader('Access-Control-Allow-Headers', '*');
         xhttp.setRequestHeader('Access-Control-Allow-Origin', '*');
         xhttp.send();
    }

    return(
        <div>
            <h1> Police </h1>
            <button onClick={handleChangeEffect()}>BTN</button>
        </div>
    )
}

我收到以下错误：

Access to XMLHttpRequest at 'http://192.168.0.165/Rainbow' from origin 'http://localhost:3000' 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.

GET http://192.168.0.165/Rainbow net::ERR_FAILED

Access to XMLHttpRequest at 'http://192.168.0.165/Rainbow' from origin 'http://localhost:3000' 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.

GET http://192.168.0.165/Rainbow net::ERR_FAILED

我的 ESP32 ASYNC 网络服务器上的代码：

 server.on("/Rainbow", HTTP_GET, [](AsyncWebServerRequest *request){
        changeShow("Rainbow");
        request->send(200, "text/plain", "Rainbow");
    });

我在网上查找了 CORS 错误，但他们都建议使用server.enableCORS() ，但上传时失败。error: 'class AsyncWebServer' has no member named 'enableCORS'

我找不到与 CORS 和 ESP32 AsyncWebservers 相关的任何内容。任何帮助，将不胜感激！

编辑1：我还添加了这个：DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");但它不起作用

Answer 1

您还必须添加以下标头：

  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");
  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Headers", "Content-Type");

对于 cors 预检，您必须在 notFound 方法中添加一个未找到的响应，如下所示

if (request->method() == HTTP_OPTIONS) {
    request->send(200);
  } else {
    request->send(404, "application/json", "{\"message\":\"Not found\"}");
  }