React Native使用Axios上传图片至Laravel首次报Network Error问题

1. 手动设置Content-Type导致后端解析失败 #

你的代码手动指定了'Content-Type': 'multipart/form-data'，但FormData在发送请求时需要自动生成带boundary参数的完整Content-Type（例如multipart/form-data; boundary=----WebKitFormBoundaryxxxx）。手动设置会丢失这个关键的boundary，导致Laravel后端无法正确解析表单数据，首次请求因此报错。第二次请求可能因Axios内部自动修正请求头、或缓存机制让请求头恢复正常，从而成功上传。

解决办法：删除手动设置的Content-Type头，让Axios自动生成：

await axios.post(api + 'updateDocument', formData, {
    // 移除该行：'Content-Type': 'multipart/form-data'
    onUploadProgress: e => {
        setProgress((e.loaded / e.total).toFixed(2))
    },
})

2. React Native图片URI格式不兼容 #

React Native中iOS和Android的图片URI格式存在差异：

• iOS的URI通常以file:///开头
• Android可能是content://或file://开头

首次请求时，URI格式不正确导致无法读取文件，第二次请求时URI可能被系统转换为可访问路径，因此上传成功。

解决办法：统一处理URI格式，并确保MIME类型正确：

import { Platform } from 'react-native';

// 适配iOS和Android的URI格式
const getFixedUri = (uri) => {
    if (Platform.OS === 'ios' && uri.startsWith('file://')) {
        return uri.replace('file://', '');
    }
    return uri;
};

// 构建FormData时使用处理后的URI
const formData = new FormData();
formData.append('profilePic', {
    uri: getFixedUri(pic.uri),
    name: pic.uri.replace(/^.*[\/]/, ''),
    // 确保MIME类型正确，若pic.type为空可直接推导
    type: pic.type || `image/${pic.uri.split(/[#?]/)[0].split('.').pop().trim()}`
});
formData.append('userId', userId);

3. Axios超时或实例配置问题 #

如果未设置合理的超时时间，首次上传大图片时可能因超时触发Network Error；第二次请求时文件可能被缓存，上传速度加快从而成功。

解决办法：增加超时时间，同时检查拦截器配置：

await axios.post(api + 'updateDocument', formData, {
    timeout: 30000, // 设置30秒超时
    onUploadProgress: e => {
        setProgress((e.loaded / e.total).toFixed(2))
    },
})

若使用了Axios拦截器，确保拦截器不会在首次请求时修改请求头或中断请求。

4. Laravel后端CSRF验证问题 #

如果Laravel开启了CSRF验证，首次请求可能因未携带正确令牌被拒绝，第二次请求时Axios自动携带了缓存的令牌（从Cookie中获取）。

解决办法：确保Axios携带CSRF令牌：

• 若为同域请求，在Laravel前端配置中添加令牌：

// 通常在resources/js/bootstrap.js中配置
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

• 若为跨域请求，开启凭证携带：

await axios.post(api + 'updateDocument', formData, {
    withCredentials: true,
    onUploadProgress: e => {
        setProgress((e.loaded / e.total).toFixed(2))
    },
})

同时确保Laravel的CORS配置允许携带凭证。

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