Angular应用无法处理ESP32等WiFi微控制器REST端点请求问题

1. 优先排查CORS跨域问题 #

这是Angular调用本地设备接口最常见的失败原因：浏览器同源策略限制了Angular开发服务器（默认端口4200）与设备IP的跨域请求，直接在浏览器地址栏访问GET请求不会触发CORS检查，但通过HttpClient发起请求会发送OPTIONS预请求，若设备服务器未处理则会失败。

• 解决方法：在设备服务器添加CORS响应头
  • Raspberry Pico（MicroPython）：在返回响应时添加头信息：

    # 基于MicroPython http.server的示例
    response = HTTPResponse(client)
    response.add_header('Access-Control-Allow-Origin', '*')
    response.add_header('Content-Type', 'application/json')
    response.send()
    response.write(json.dumps(weather_data))
    

  • ESP32（C语言服务器）：在构建HTTP响应时添加CORS头：

    // 发送响应头阶段加入
    printf("Access-Control-Allow-Origin: *\r\n");
    printf("Content-Type: application/json\r\n");
    printf("\r\n"); // 头与内容的分隔线
    printf("%s", json_payload);
    

• 替代方案：使用Angular代理转发
  创建proxy.conf.json文件：

  {
    "/weather/*": {
      "target": "http://192.168.0.18", // 可根据环境切换为192.168.0.20
      "secure": false,
      "changeOrigin": true
    }
  }
  

  修改angular.json中serve配置的proxyConfig指向该文件，之后Angular请求/weather/会自动转发到设备地址，规避跨域。

2. 处理ESP32的纯文本JSON响应 #

ESP32返回纯文本格式的JSON，但HttpClient默认期望application/json类型的响应，若服务器返回的Content-Type为text/plain，会导致无法自动解析JSON，返回undefined。

• 方案1：修改ESP32服务器的Content-Type
  在响应头中设置Content-Type: application/json（如上述C代码示例），让Angular自动解析。
• 方案2：在Angular中手动处理文本响应
  修改服务中的请求代码，指定响应类型为text后手动解析：

  getAtmoConditions(): Observable<WeatherConditions> {
    const url = this.getServiceUrl() + environment.GET_ALL;
    return this.http.get(url, { responseType: 'text' }).pipe(
      map(text => JSON.parse(text) as WeatherConditions)
    );
  }
  

3. 添加错误捕获，定位具体问题 #

当前代码未处理请求错误，无法看到具体失败原因，添加错误回调：

ngOnInit(): void {
  this.weatherService.getAtmoConditions().subscribe({
    next: res => {
      console.log(res);
      this.weatherConditions = res;
      this.dataLoaded = Promise.resolve(true);
    },
    error: err => {
      console.error('请求失败详情:', err);
      // 控制台会输出具体错误，比如CORS错误、解析错误、404等
    }
  });
}

4. 验证请求URL的正确性 #

确认拼接后的URL与浏览器中正常访问的地址完全一致：

• 检查environment.GET_ALL的值是否正确，避免出现重复斜杠（如http://192.168.0.18/weather//getAll）或路径缺失。
• 通过服务中的console.log(url)输出，对比浏览器中成功访问的URL。

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