Angular浏览器/Android端发送HTTP Post请求遇0未知错误求助

问题分析 #

该错误通常由以下核心原因导致：

• 前端错误设置了服务器专属的CORS响应头（如Access-Control-Allow-Origin），干扰浏览器CORS校验逻辑
• 请求体格式与服务器预期不匹配（代码中创建了FormData但未使用，反而将带前缀的Base64数据放入JSON对象发送）
• 带data:image/xxx;base64,前缀的Base64数据超出服务器解析预期

修复步骤 #

1. 移除前端错误配置的CORS响应头 #

Access-Control-Allow-Origin、Access-Control-Allow-Methods是服务器返回给浏览器的响应头，前端请求时无需设置，否则会导致请求格式异常。修改请求头配置：

var httpHeader = {
  headers: new HttpHeaders({ 
    // 仅保留业务必要的头，若发送FormData则无需手动设置Content-Type（Angular会自动处理）
  })
};

2. 匹配服务器预期的请求体格式 #

方式一：用FormData传递Blob（推荐，减少数据体积）

直接上传图片Blob对象，避免Base64转换带来的体积膨胀：

async sendPostRequest() {
  // ... 其他逻辑 ...
  const formData = new FormData();
  // 追加Blob并指定文件名
  formData.append('file1', this.blob_photo1, 'photo1.jpg');
  formData.append('file2', this.blob_photo2, 'photo2.jpg');

  // 发送请求，无需手动设置Content-Type
  this.http.post("https://API_URL/", formData)
    .subscribe(/* 订阅逻辑 */);
}

方式二：传递去前缀的Base64字符串

若服务器要求接收Base64格式，需去掉data:image/xxx;base64,前缀：

async sendPostRequest() {
  // ... 其他逻辑 ...
  // 清理Base64前缀
  const cleanBase64_1 = this.base64Data_photo1.split(',')[1];
  const cleanBase64_2 = this.base64Data_photo2.split(',')[1];

  const files = {
    file1: cleanBase64_1,
    file2: cleanBase64_2
  };

  const httpHeader = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  this.http.post("https://API_URL/", files, httpHeader)
    .subscribe(/* 订阅逻辑 */);
}

3. 优化异步逻辑（可选） #

用async/await简化loadingController的回调嵌套，提升代码可读性：

async sendPostRequest() {
  this.distance_value.result ='';
  const loading = await this.loadingController.create({ message: 'Loading...' });
  await loading.present();

  try {
    // 请求逻辑
    const data = await this.http.post("https://API_URL/", formData).toPromise();
    this.distance_value = data;
    console.log("请求返回数据:", data);
  } catch (error) {
    console.log("请求错误:", error);
    this.distance_value.result = "Error!";
  } finally {
    await loading.dismiss();
  }
}

4. 服务器端配置检查 #

确保服务器满足以下要求：

• 正确配置CORS，允许前端域名（或*）跨域请求
• 支持接收你发送的请求格式（FormData或JSON格式的Base64）
• 配置足够大的请求体大小限制（图片数据通常体积较大）

完整修改后的代码示例 #

takeFirstPicture = async () => {
  const convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });

  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Uri
  });
  this.signaturePhoto1 = image.webPath;

  const response = await fetch(image.webPath!);
  this.blob_photo1 = await response.blob();
  this.base64Data_photo1 = await convertBlobToBase64(this.blob_photo1);   
};

takeSecondPicture = async () => {
  const convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });

  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Uri
  });
  this.signaturePhoto2 = image.webPath;

  const response = await fetch(image.webPath!);
  this.blob_photo2 = await response.blob();
  this.base64Data_photo2 = await convertBlobToBase64(this.blob_photo2);   
};

async sendPostRequest() {
  this.distance_value.result ='';
  const loading = await this.loadingController.create({ message: 'Loading...' });
  await loading.present();

  try {
    const formData = new FormData();
    formData.append('file1', this.blob_photo1, 'photo1.jpg');
    formData.append('file2', this.blob_photo2, 'photo2.jpg');

    const data = await this.http.post("https://API_URL/", formData).toPromise();
    this.distance_value = data;
    console.log("请求返回数据:", data);
  } catch (error) {
    console.log("请求错误:", error);
    this.distance_value.result = "Error!";
  } finally {
    await loading.dismiss();
  }
}

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