React Native对接Django后端遇Axios网络错误问题求助

问题描述 #

在React Native项目中调用Django后端API时，触发错误：Possible Unhandled Promise Rejection (id: 0): [AxiosError: Network Error]。此前在React JS中实现过相同功能，但React Native环境下无法运行。

React Native代码 #

import React, { useState, useEffect } from "react";
import axios from "axios";

import { StyleSheet, ScrollView, View, Text } from "react-native";

// Components
import ProductCard from "../components/ProductCard";

export default function HomeScreen({ navigation }) {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchProducts() {
      const { data } = await axios.get("http://127.0.0.1:8000/api/products/");
      setProducts(data);
    }

    fetchProducts();
  }, []);

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollView}>
        {products.map((product) => (
          <View style={styles.productsContainer}>
            <ProductCard product={product} navigation={navigation} />
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

Django settings.py配置 #

INSTALLED_APPS = [
    "corsheaders",
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
]

CORS_ALLOW_ALL_ORIGINS = True

解决步骤 #

• 替换本地IP地址
  React Native模拟器/真机无法通过127.0.0.1访问电脑上的Django服务，因为模拟器有独立的网络环境。找到电脑的本地IP（Windows用ipconfig，Mac/Linux用ifconfig或ip addr），将请求地址改为http://你的本地IP:8000/api/products/。

• 允许Django服务外部访问
  启动Django时，使用命令python manage.py runserver 0.0.0.0:8000，让服务监听所有网卡，允许外部设备访问。默认的runserver仅监听127.0.0.1，只能本地访问。

• 捕获Promise错误
  原代码未处理请求错误，会导致未捕获的Promise拒绝。修改fetchProducts函数添加错误捕获：

  async function fetchProducts() {
    try {
      const { data } = await axios.get("http://你的本地IP:8000/api/products/");
      setProducts(data);
    } catch (error) {
      console.error("获取数据失败:", error);
    }
  }
  

• 检查网络与防火墙

  • 确保手机/模拟器和电脑处于同一Wi-Fi网络。
  • 检查电脑防火墙是否拦截8000端口的入站请求，必要时临时关闭防火墙测试。

• 验证Django API可用性
  先在电脑浏览器访问http://你的本地IP:8000/api/products/，确认能正常返回JSON数据，排除Django后端自身的问题。

内容的提问来源于stack exchange，提问作者Martin Arreola