Capacitor封装React应用iOS端Axios正确响应进入catch块报错求助

这个问题是iOS WKWebView及Capacitor原生网络栈对multipart/form-data格式的校验严格度高于Web和Android端导致的，两个核心修复方案如下：

你在请求头中手动指定了Content-Type: multipart/form-data，但标准的multipart/form-data请求头必须附带随机生成的boundary分隔符参数，用来标识请求体中不同字段的边界。当你手动写死Content-Type时，会覆盖Axios自动生成的带boundary的请求头，导致iOS端无法正确解析请求结构，最终抛出无意义的Network Error。

直接删除请求头中的Content-Type配置即可，Axios会在检测到请求体为FormData类型时，自动生成带正确boundary的请求头：

const apiurl = "https://xxxx.xxx.com/receiptReader";
const upload = async (e) => {
  const frmdata = new FormData();
  frmdata.append("file", document.getElementById("a").files[0]);

  await axios({
    method: "post",
    url: apiurl,
    data: frmdata,
    headers: {
      Authorization: "ccccc@hotmail.com",
      // 删掉手动设置的Content-Type即可
    },
  }).then((response) => {
      console.log(response);
      setHi(JSON.stringify(response));
    })
    .catch((error) => {
      console.log(error.message);
      console.log("error");
    });
};

Capacitor 3默认会拦截WebView的XHR请求走原生网络栈，部分版本对Axios的FormData处理存在兼容问题。如果修改Axios配置后依旧报错，可以直接使用Capacitor官方的@capacitor/http插件完成上传，避免XHR拦截的兼容问题：

1. 先安装插件：
   npm install @capacitor/http
2. 修改上传代码：

import { Http } from '@capacitor/http';

const apiurl = "https://xxxx.xxx.com/receiptReader";
const upload = async (e) => {
  const file = document.getElementById("a").files[0];
  // 把文件转成base64供原生插件使用
  const getBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result.split(',')[1]);
    reader.onerror = reject;
  });
  const fileBase64 = await getBase64(file);

  await Http.uploadFile({
    url: apiurl,
    method: 'POST',
    headers: {
      Authorization: "ccccc@hotmail.com",
    },
    filePath: fileBase64,
    name: 'file',
    mimeType: file.type,
  }).then((response) => {
      console.log(response.data);
      setHi(JSON.stringify(response.data));
    })
    .catch((error) => {
      console.log(error.message);
      console.log("error");
    });
};

如果以上方案都无效，可以通过XCode打开iOS项目运行，查看控制台的原生层报错信息，或者打开Safari的开发者工具连接WebView，查看实际发出的请求头是否带正确的boundary参数。

内容的提问来源于stack exchange，提问作者Sai Saagar Sharman