Expo环境React Native中axios.post发送GET而非POST请求问题

问题现象 #

在Expo环境的React Native项目中，发送包含图片的multipart/form-data格式POST请求时，API端实际接收到的是GET请求。仅发送文本内容时请求正常，添加图片后触发该异常；切换为Fetch API测试，问题依然存在；调整URL末尾斜杠也无法解决。

相关代码 #

const submitDailyLog = async () => {
    console.log("Submitting log...");
  
    if (!content.trim()) {
      Alert.alert("Error", "Content cannot be empty.");
      return;
    }
  
    // Construct FormData
    const formData = new FormData();
    formData.append("content", content.trim());
    photos.forEach((photo, index) => {
      formData.append(`photos[${index}]`, {
        uri: photo.uri,
        name: photo.name,
        type: photo.type,
      });
    });
  
    console.log("FormData:", formData);
  
    const response = await axios.post(
      `https://sub.site.com/api/test/echo`,
      formData,
      {
        headers: {
          Authorization: `Bearer ${authToken}`,
          "Content-Type": "multipart/form-data",
        },
      }
    );
  
    console.log("API Response:", response.data);
  };

API回显响应 #

API Error Response: {"data": [], "headers": {"accept": ["application/json, text/plain, */*"], ["multipart/form-data; boundary=ZDpdBRQnGPN2ZfBr0r_KfyxIpJl40FbEX3ikNVWRKe2rZDilF51CaVr-Mwlpd6UYOk3mzx"],  "method_called": "GET", "server_request_method": "GET", "success": true, "tagging_code": 406, "uri": "api/test/echo"}

解决方案 #

• 移除手动设置的Content-Type头
  当请求体为FormData时，axios和Fetch会自动生成包含正确boundary的multipart/form-data头。手动设置会丢失boundary参数，导致请求格式错误，部分服务器会将无效的POST请求重定向为GET。修改后的请求配置如下：

  const response = await axios.post(
    `https://sub.site.com/api/test/echo`,
    formData,
    {
      headers: {
        Authorization: `Bearer ${authToken}`,
        // 移除手动设置的Content-Type
      },
    }
  );
  

• 校验图片URI有效性
  确保Expo返回的图片URI格式正确（如file://开头的本地路径），避免因无效文件信息导致请求解析失败，触发服务器的请求方法转换。

• 排查请求拦截器
  检查项目中是否存在axios或Fetch的请求拦截器，确认没有拦截器修改请求方法或篡改请求头，导致POST被意外转为GET。

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