ESP32 NodeMCU Lua环境下CORS跨域问题排查与方案咨询

问题核心 #

你的报错本质是ESP32返回的响应里缺少Access-Control-Allow-Origin头，而且Angular发起跨域请求时，浏览器会先发送OPTIONS预检请求（因为属于非简单跨域请求），ESP32没处理这个请求，导致浏览器直接拦截了后续响应。

解决方案步骤 #

1. 给所有响应添加CORS头 #

不管是GET/POST还是OPTIONS请求，都得在响应里带上CORS相关头。用api32库可以通过全局中间件批量处理，也能在单个接口里单独添加：

全局添加（推荐，一次配置所有接口）

// 初始化API后，添加全局响应头中间件
api.addMiddleware([](ApiRequest &req, ApiResponse &res) {
    // 允许所有域名跨域，本地调试用*没问题，生产环境建议指定APP实际域名
    res.setHeader("Access-Control-Allow-Origin", "*");
    // 允许的请求方法，按需调整
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    // 允许的请求头，根据你的APP实际请求头修改，比如JSON请求要带Content-Type
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    // 如果需要带Cookie，再加这行
    // res.setHeader("Access-Control-Allow-Credentials", "true");
});

单个接口添加

api.post("/", [](ApiRequest &req, ApiResponse &res) {
    // 这里写你的POST数据处理逻辑...
    
    // 添加CORS头
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    
    // 返回业务响应
    res.send(200, "处理完成", "text/plain");
});

2. 处理OPTIONS预检请求 #

浏览器发非简单跨域请求前，会先OPTIONS请求确认服务器是否允许跨域，ESP32必须处理这个请求，返回200/204状态和CORS头：

// 匹配所有路径的OPTIONS请求
api.options("/*", [](ApiRequest &req, ApiResponse &res) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    // 预检请求不需要返回内容，返回204即可
    res.send(204);
});

3. 验证调试 #

• 重启ESP32让代码生效
• 用Angular APP重新发起请求，检查是否还有CORS报错
• 打开Chrome开发者工具的Network面板，查看响应头是否包含Access-Control-Allow-Origin，以及OPTIONS请求是否返回200/204状态

注意事项 #

• 生产环境别用*作为允许的Origin，要指定你的APP实际域名（比如安卓WebView的本地地址），本地调试用*没问题
• 如果你的POST请求是JSON格式，一定要确保Access-Control-Allow-Headers包含Content-Type，不然预检请求会失败

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