React Native使用Axios提交Form Data时出现跨平台网络错误

问题背景 #

开发的文档/图片上传应用，技术栈：

• react: 17.0.2
• react-native: 0.68.2
• axios: 1.3.2

使用Axios调用上传接口时，iOS和Android均触发Network Error，但相同API在Web端及Postman中可正常运行，提交JSON数据的接口也能正常工作。

相关代码：

try {
    var formData = new FormData();
    formData.append('file', fileUpload);
    const obj = { hello: "world" };
    formData.append('param', JSON.stringify(obj));
    const response = await axios({
        method: 'post',
        url: 'https://xxxxxxxxxxx.com/fr_webservice/file/doUpload',
        data: formData,
        headers: {
            'x-auth-token': authData.token,
            Accept: "application/json ,text/plain, */*",
            "Content-Type": "multipart/form-data"
        },
    });
    console.log("[Form Data Response]: ", response);
} catch (error) {
    console.log("[Form Data Error]: ", error);
}

报错信息：

"AxiosError: Network Error
    at XMLHttpRequest.handleError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:191293:16)
    at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:26337:27)
    at XMLHttpRequest.setReadyState (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:25607:20)
    at XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:25417:16)
    at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:25543:47
    at EventEmitter.emit (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:1731:37)
    at MessageQueue.__callFunction (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:2533:31)
    at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:2302:17
    at MessageQueue.__guard (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:2492:13)
    at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbp.employeeone&modulesOnly=false&runModule=true:2301:14)"

解决方案 #

1. 移除手动设置的Content-Type #

Axios处理FormData时会自动生成包含boundary参数的正确multipart/form-data请求头，手动设置会丢失boundary，导致后端无法解析请求，触发网络错误。

修改后的请求代码：

try {
    var formData = new FormData();
    formData.append('file', fileUpload);
    const obj = { hello: "world" };
    formData.append('param', JSON.stringify(obj));
    const response = await axios({
        method: 'post',
        url: 'https://xxxxxxxxxxx.com/fr_webservice/file/doUpload',
        data: formData,
        headers: {
            'x-auth-token': authData.token,
            Accept: "application/json, text/plain, */*" // 清理多余空格
        },
    });
    console.log("[Form Data Response]: ", response);
} catch (error) {
    console.log("[Form Data Error]: ", error);
}

2. 确保fileUpload符合RN FormData格式要求 #

React Native中，上传的文件对象必须包含三个核心属性：

• uri: 文件本地路径（iOS以file://开头，Android可使用content uri或file uri）
• type: 文件MIME类型（如image/jpeg、application/pdf）
• name: 文件名

示例：

const fileUpload = {
    uri: 'file:///storage/emulated/0/Download/test.pdf',
    type: 'application/pdf',
    name: 'test.pdf'
};

3. 检查平台配置 #

• Android: 确认AndroidManifest.xml已添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS: 检查Info.plist中的ATS配置，若接口为HTTPS仍有问题，可添加域名例外（生产环境不建议全局关闭ATS）：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <false/>
      <key>NSExceptionDomains</key>
      <dict>
          <key>xxxxxxxxxxx.com</key>
          <dict>
              <key>NSIncludesSubdomains</key>
              <true/>
              <key>NSExceptionAllowsInsecureHTTPLoads</key>
              <false/>
          </dict>
      </dict>
  </dict>
  

4. 尝试降级Axios版本 #

Axios 1.3.x与React Native 0.68.x可能存在兼容性问题，可降级至1.2.6版本：

npm install axios@1.2.6

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