chrome not sending preflight, firefox seems to be working

[jschoch]

I'm connecting to an ESP32 running espasyncwebserver. I want to serve my react app via amazon S3. After battling much I've managed to get firefox working but chrome refuses to send the preflight.

my react is something like this

var headers = {
            headers: {
              'Access-Control-Request-Private-Network': 'true',
              'Access-Control-Request-Origin': '*',
              'Access-Control-Request-Method': 'GET',
              'Access-Control-Request-Headers': '*'
            }
          }
          var url = "http://"+ cookies.ip_or_hostname+ "/events"
          var source = new EventSourcePolyfill(url,headers);

my esp32 is something like this

ws.onEvent(onWsEvent);
  server.on("/events",HTTP_OPTIONS,[](AsyncWebServerRequest * request) {
    printf("got preflight");
    int headers = request->headers();
    int i;
    for(i=0;i<headers;i++){
      AsyncWebHeader* h = request->getHeader(i);
      Serial.printf("HEADER[%s]: %s\n", h->name().c_str(), h->value().c_str());
    }
    request->send(200, "text/plain", "Post route");
  });
  server.addHandler(&ws);
  server.addHandler(&events);
  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");
  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Headers", "*");
  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Method", "*");
  DefaultHeaders::Instance().addHeader("Access-Control-Allow-Private-Network", "true");

  server.begin();
...

same code in firefox is working great

and here are the headers

chrome doesn't even show any headers, and my esp32 never see's a OPTIONS request. it seems to be blocked in chrome before it can be sent

the console log in chrome says:

index-cors2.html?ip=192.168.1.87:2 setting up websocket ws://192.168.1.87/els
index-cors2.html:1 Access to fetch at 'http://192.168.1.87/events' from origin 'http://espels.s3.us-west-2.amazonaws.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.
index-cors2.html?ip=192.168.1.87:2 
        
        

index-cors2.html?ip=192.168.1.87:2 TypeError: Failed to fetch
    at N.open (index-cors2.html?ip=192.168.1.87:2:6507)
    at Z (index-cors2.html?ip=192.168.1.87:2:11010)
    at index-cors2.html?ip=192.168.1.87:2:10266
Y @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
Promise.then (async)
N.open @ index-cors2.html?ip=192.168.1.87:2
Z @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
setTimeout (async)
Y @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
Promise.then (async)
N.open @ index-cors2.html?ip=192.168.1.87:2
Z @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
setTimeout (async)
Y @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
Promise.then (async)
N.open @ index-cors2.html?ip=192.168.1.87:2
Z @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
q @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
os @ index-cors2.html?ip=192.168.1.87:2
Sc @ index-cors2.html?ip=192.168.1.87:2
cc @ index-cors2.html?ip=192.168.1.87:2
Vo @ index-cors2.html?ip=192.168.1.87:2
(anonymous) @ index-cors2.html?ip=192.168.1.87:2
kc @ index-cors2.html?ip=192.168.1.87:2
ac @ index-cors2.html?ip=192.168.1.87:2
k @ index-cors2.html?ip=192.168.1.87:2
P @ index-cors2.html?ip=192.168.1.87:2
index-cors2.html:1 Access to fetch at 'http://192.168.1.87/events' from origin 'http://espels.s3.us-west-2.amazonaws.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.
index-cors2.html?ip=192.168.1.87:2 
        
        
       GET http://192.168.1.87/events net::ERR_FAILED

at a complete loss as how to trouble shoot this.

I can share the fulll sources but I need to deal with some git issues right now. let me know if you need more source.

[Yaffle]

Searching for "The request client is not a secure context and the resource is in more-private address space private" says that it is Chrome blocking the request". Have you tried to make the "context" secure if you run your app on https: instead of http:?

[jschoch]

it is an esp32 that is crunching interrupts to run my lathe so HTTPS may be too much to ask.

here's the code for the esp32 https://github.com/jschoch/ESPels/blob/dev/src/src/web.cpp#L932

and the react code is here https://github.com/jschoch/espELSfrontend/blob/dev/src/App.js#L200

[jschoch]

also, i saw in the documentation that the preflight example they used issues a 204, not a 200. I'd wonder if that is an issue on the server side but it never actually makes the OPTIONS request since I'm logging that and never see it.

[chixinwang]

@jschoch I didn't use esp32, but you use DefaultHeaders::Instance().addHeader("Access-Control-Allow-Headers", "*");, this can put Access-Control-Allow-Headers to all response headers? this is my guess。

[chixinwang]

I am using Node.js as the backend, and I am encountering the CORS error as well. Last method to slove is add response head Access-Control-Allow-Headers: *。

God bless you!