React Native传递URL和Payload调用Axios遇Network Error问题

开发React Native应用实现API调用时遇到诡异问题：硬编码URL和Payload能正常获取响应，但换成传递参数的形式就抛出Network Error，控制台打印的参数与硬编码内容完全一致，却无法定位问题。

硬编码时正常的代码 #

import axios from 'axios';
const getPayload = (payload: any | FormData, isFormData = false) => {
  if (isFormData) {
    return payload;
  } else {
    return {...payload};
  }
};

export default {
  post: async (
    url: string,
    payload = {},
  ): Promise<any> => {      
    payload = getPayload(payload);
    console.log("url: ",url)
    console.log("payload: ", payload);
    
    axios.post('https://url.com/user/login', {"email": "email@gmail.com", "password": "123456"})
      .then((resp: any)=> {
          console.log("resp here: ",JSON.stringify(resp.data));
      })
      .catch((err: any)=> {
          console.log("err here: ", err);
      });
    // return getRequestPromise(request);
  },
};

传递参数时报错的代码 #

import axios from 'axios';
const getPayload = (payload: any | FormData, isFormData = false) => {
  if (isFormData) {
    return payload;
  } else {
    return {...payload};
  }
};

export default {
  post: async (
    url: string,
    payload = {},
  ): Promise<any> => {      
    payload = getPayload(payload);
    console.log("url: ",url)
    console.log("payload: ", payload);
    
    axios.post(url, payload)
      .then((resp: any)=> {
          console.log("resp here: ",JSON.stringify(resp.data));
      })
      .catch((err: any)=> {
          console.log("err here: ", err);
      });
    // return getRequestPromise(request);
  },
};

触发的错误信息 #

err here:  [Error: Network Error]

控制台打印的参数（与硬编码完全一致） #

LOG  url:   https://url.com/user/login
LOG  payload:  {"email": "email@gmail.com", "password": "123456"}

排查方向和解决方案 #

1. 清理URL隐形字符
   注意控制台打印的URL前有多余空格，大概率是传递的url参数带了前导/尾随空格，硬编码URL无此问题。使用前给URL做trim处理：

   url = url.trim();
   axios.post(url, payload)
   

2. 跳过getPayload函数验证
   暂时注释payload = getPayload(payload)，直接使用原始传入的payload，排查是否是该函数处理导致的结构差异。

3. 显式指定请求头
   硬编码与传参时默认请求头可能存在差异，显式设置Content-Type确保一致：

   axios.post(url, payload, {
     headers: { 'Content-Type': 'application/json' }
   })
   

4. 打印完整请求配置
   添加Axios请求拦截器，查看实际发送的请求详情（URL、payload、headers等），与硬编码请求做对比：

   axios.interceptors.request.use(config => {
     console.log('完整请求配置:', JSON.stringify(config, null, 2));
     return config;
   });
   

5. 清除调试环境缓存
   重启React Native Metro服务，清除应用缓存后重新测试，避免Debug模式下的缓存干扰。

内容的提问来源于stack exchange，提问作者pratteek shaurya