React Native中API请求遇网络错误，数据无法展示求助

问题现象 #

React Native项目中使用Axios请求https://localhost:7199/api/Newone2时，控制台提示Error fetching data: [AxiosError: Network Error]，无法获取数据；但相同API在ReactJS项目中可正常请求并展示数据，API响应结构正常：

[
  {
    "id": 6,
    "name": "Akash",
    "email": "akash@gmail.com",
    "phone": 789456,
    "password": 123
  }
]

排查与解决方案 #

1. 替换localhost为开发电脑的局域网IP #

React Native运行在模拟器或真机时，localhost指向设备自身，而非你的开发电脑。必须换成电脑的局域网IPv4地址：

• 查看IP：Windows执行ipconfig，Mac/Linux执行ifconfig或ip addr，找到局域网段的IP（比如192.168.1.100）。
• 修改代码：将Axios请求URL替换为实际IP，示例：

  axios.get('http://192.168.1.100:7199/api/Newone2')
  

2. 处理HTTPS自签名证书问题 #

如果API使用自签名HTTPS证书，React Native默认会拒绝连接，可在开发环境临时关闭SSL验证（生产环境禁止此操作）：

import axios from 'axios';
import https from 'https';

// 仅开发环境使用
const agent = new https.Agent({ rejectUnauthorized: false });

function getData() {
  axios.get('https://192.168.1.100:7199/api/Newone2', { httpsAgent: agent })
    .then((response) => {
      console.log(response.data);
      setDatas(response.data);
    })
    .catch((error) => {
      console.error('Error fetching data:', error);
    });
}

3. 检查防火墙与端口开放 #

确保开发电脑的7199端口对外开放：

• 关闭电脑防火墙测试（或添加允许7199端口的入站规则）。
• 用手机浏览器访问http://你的IP:7199/api/Newone2，如果能拿到数据，说明网络通路正常。

4. Android模拟器专用地址 #

Android模拟器中，10.0.2.2是开发电脑localhost的映射地址，可以尝试替换：

axios.get('http://10.0.2.2:7199/api/Newone2')

5. 确认API服务绑定地址 #

确保API服务不是仅绑定127.0.0.1，要允许外部设备访问：

• 比如ASP.NET Core项目，启动时添加参数：dotnet run --urls=http://0.0.0.0:7199，让服务绑定所有网卡。

修改后的完整React Native代码示例 #

import { DataTable, Text } from 'react-native-paper';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import https from 'https';
import { View } from 'react-native'; 

const Gender = () => {
  const [datas, setDatas] = useState([]);

  // 开发环境临时关闭SSL验证（生产环境删除此配置）
  const agent = new https.Agent({ rejectUnauthorized: false });

  function getData() {
    // 替换为你的电脑局域网IP
    axios.get('https://192.168.1.100:7199/api/Newone2', { httpsAgent: agent })
      .then((response) => {
        console.log(response.data);
        setDatas(response.data);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  }
  

  useEffect(() => {
    getData();
  }, []);

  return (
    <>
      <Text>Api data:-</Text>

      {datas.length ? datas.map((item) => (
        <View key={item.id}>
          <Text>id: {item.id}</Text>
          <Text>name: {item.name}</Text>
        </View>
      )) : <Text>No data found</Text>}
    </>
  );
};

export default Gender;

内容的提问来源于stack exchange，提问作者Akash Gupta