Chrome阻止Flutter应用POST请求，OPTIONS响应无效求助

我在开发Flutter Web应用时遇到CORS相关问题，该应用需要向搭载Webserver.h的ESP32微控制器上的RESTful服务器发送POST请求，请求头为：

{'Content-Type': 'application/json','Accept': 'application/json'}

这个POST请求在原生Windows应用和Postman中能正常执行，但在Chrome（及Edge）浏览器中，请求会被自动转为OPTIONS /blink预请求。

我已经在ESP32服务器中添加了CORS处理逻辑，返回204状态码和相应的响应头：

void handleOptionsNoGet() {
    json.clear();
    server.sendHeader("Access-Control-Allow-Origin", "*");
    server.sendHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
    server.sendHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,       Accept");
    server.send(204); // code 204: No Content
    json.clear();
}

通过Wireshark抓包确认服务器确实返回了204响应，但Chrome仍然不允许后续的POST请求发送，每次尝试都会触发OPTIONS请求，导致应用无法正常工作。

已经验证过请求本身是有效的（Postman和无CORS限制的Windows应用可正常运行），但Chrome和Edge都存在相同的阻塞问题。我推测是CORS策略配置的问题，但服务器响应头已经明确允许请求中的相关字段，对此感到困惑，希望得到解决思路。

可能的解决思路 #

1. 检查OPTIONS路由绑定是否正确 #

确保ESP32的WebServer已将/blink路径的OPTIONS请求正确绑定到handleOptionsNoGet函数，示例代码：

server.on("/blink", HTTP_OPTIONS, handleOptionsNoGet);

若路由绑定错误，服务器可能无法正确处理OPTIONS请求，或返回非预期的响应头。

2. 为POST请求路由添加CORS响应头 #

浏览器会同时验证OPTIONS预请求和实际POST请求的响应头，需在POST请求处理函数中也添加Access-Control-Allow-Origin头：

void handlePostBlink() {
    // 处理POST请求逻辑
    server.sendHeader("Access-Control-Allow-Origin", "*");
    server.send(200, "application/json", "{\"status\":\"success\"}");
}

仅处理OPTIONS请求的CORS头会导致实际POST请求被浏览器拦截。

3. 修正Access-Control-Allow-Headers的格式 #

原代码中Content-Type,后存在多余空格，可能导致浏览器解析异常，建议改为无冗余空格的格式：

server.sendHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

4. 确保ESP32响应完整关闭 #

部分情况下WebServer.h发送204响应后未正确关闭连接，可添加server.client().stop()确保响应完整：

void handleOptionsNoGet() {
    json.clear();
    server.sendHeader("Access-Control-Allow-Origin", "*");
    server.sendHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
    server.sendHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    server.send(204);
    server.client().stop(); // 强制关闭连接，确保响应完整
    json.clear();
}

5. 检查Flutter请求配置 #

确认Flutter的POST请求没有额外未被服务器允许的自定义头字段，若有需在Access-Control-Allow-Headers中添加对应字段；同时验证请求的Content-Type确实为application/json。

6. 排除浏览器缓存影响 #

浏览器可能缓存旧的CORS响应导致新配置不生效，可尝试清除浏览器缓存或使用隐私模式测试。

内容的提问来源于stack exchange，提问作者MediocreDeveloper