Android端Chrome浏览器中Axios无法发送FormData的问题排查

我用React（通过npm create-react-app初始化）开发前端，使用Axios上传文件时遇到跨平台问题：代码在桌面端Google Chrome运行正常，但在Android手机的Google Chrome中触发网络错误。

相关代码 #

const handleSubmit = () => {
  const formData = new FormData()

  files.forEach(file => {
    formData.append('files', file.file)
  })

  axios.postForm('http://example.com/upload-photo', formData, {
    headers: {Authorization: 'QWERTY'},
  }).then(res => {
    console.logres() // 注意：此处存在笔误，应为console.log(res)
  }).catch(err => {
    console.log(err)
  })
}

Android Chrome报错信息 #

{
  "message": "Network Error",
  "name": "AxiosError",
  "stack": "AxiosError: Network Error\n at b.onerror (http://example.com/static/js/main.24638a12.js:2:1202448)",
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "adapter": [
      "xhr",
      "http"
    ],
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": {},
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "Authorization": "Bearer QWERTY"
    },
    "method": "post",
    "url": "http://example.com/upload-photo",
    "data": {}
  },
  "code": "ERR_NETWORK",
  "status": null
}

项目依赖版本 #

{
  "axios": "^1.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^8.0.5",
  "react-router-dom": "^6.9.0",
  "react-scripts": "5.0.1"
}

问题排查方向 #

1. 代码笔误（不直接导致网络错误，但影响调试）

代码中console.logres()是明显笔误，应改为console.log(res)，避免控制台额外报错干扰问题定位。

2. 协议混合问题（最常见的跨平台差异）

如果前端部署在HTTPS环境，而后端接口使用HTTP，Android Chrome会默认阻止非安全的跨协议请求（桌面Chrome可能因用户设置或宽松策略允许）。需确保前端和后端使用相同的协议（均为HTTPS或均为HTTP）。

3. Axios postForm兼容性

Axios 1.5.0的postForm是较新的API，可能在Android旧版本Chrome中存在兼容性问题。可以尝试替换为传统的axios.post方式测试：

axios.post('http://example.com/upload-photo', formData, {
  headers: {
    Authorization: 'Bearer QWERTY', // 注意错误信息中实际头带了Bearer前缀，代码需保持一致
  },
})

注意：不要手动设置Content-Type: multipart/form-data，Axios会自动识别FormData并添加正确的头信息，手动设置可能导致边界符缺失。

4. 文件对象有效性

检查移动端选择文件后，files数组中的file.file是否为合法的File对象。可以在handleSubmit开头添加console.log(files)，通过Chrome远程调试查看Android端的文件对象是否正常。

5. CORS配置问题

后端CORS策略可能存在针对移动端的限制：

• 检查是否限制了请求的Origin（移动端的Origin是否和桌面一致）；
• 是否存在User-Agent过滤规则，拦截了移动端的请求；
• 确保后端允许multipart/form-data类型的请求。

6. 文件大小限制

移动端上传的文件可能比桌面端大，若后端设置了文件大小限制，且未返回明确错误，前端可能会将其识别为网络错误。可以尝试上传小文件测试是否能成功。

7. Authorization头一致性

错误信息中显示请求头的Authorization为Bearer QWERTY，但代码中写的是Authorization: 'QWERTY'，存在前缀缺失。虽然桌面端正常，但后端可能对移动端请求的头格式校验更严格，需修正代码中的头信息为Authorization: 'Bearer QWERTY'。

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