React Native调用Django REST Framework API出现AxiosError: Network Error求助

我在安卓真机上运行前端应用（未使用模拟器），通过Postman可以正常调用Django REST Framework中定义的API，但前端调用时收到错误：AxiosError: Network Error

相关配置与代码 #

Settings.py #

DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'cadence',
    'rest_framework_simplejwt',
    'rest_framework',
    'corsheaders',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': ( 
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ) 
}

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

CORS_ALLOW_ALL_ORIGINS = True

SpotifyViews.py #

class SpotifyViews(APIView):
    authentication_classes = [JWTAuthentication]
    permission_classes = [IsAuthenticated]

    def create_spotify_token(request):
        try:
            url = 'https://accounts.spotify.com/api/token'
            headers = {
                "content-type": "application/x-www-form-urlencoded"
            }
            data = {
                "grant_type": "client_credentials",
                "client_id": "{my client id}",
                "client_secret": "{my client secret}"
            }

            encoded_data = urlencode(data)
            response = requests.post(url, headers=headers, data=encoded_data)

            if response.status_code == 200:
               return JsonResponse(response.json())
            else:
                return JsonResponse({"error": "Failed to get Spotify token"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
            
        except Exception as error:
            return JsonResponse({"error": str(error)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

JS代码 #

axios.defaults.baseURL = "http://localhost:8000/";

export const sendRequest = async (method, endpoint, body) => {
    const response = await axios.request({
        method: method,
        url: endpoint,
        data: body,
        headers: {
            // Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
    });

    if (response.status === 401) {
        // do somethinhg
    }

    return response;
};

const handleSignUp = async () =>{
  console.log("signed up")
  router.push("/login")
  if(!info.email || !info.username || !info.password){
    Alert.alert("Error", "All fields are required")
    return
  }
  setIsSubmitting(true)
  console.log(info)
  try{
    const response = await sendRequest(requestMehods.POST, "cadence/api/user/register/", {
      ...info,
    });
    console.log("response")
    if (response.data.status === "success") {
      // do somethinhg
      router.push("/registration")
    }
  } catch (error){
    console.log(error)
  } finally {
    setIsSubmitting(false)
  }
};

可能的原因 #

• 本地地址无法被真机访问
  前端代码中axios.defaults.baseURL设置为http://localhost:8000/，localhost指向设备自身的回环地址，安卓真机无法通过这个地址访问电脑上运行的Django服务。需要将其替换为电脑在局域网中的实际IP（如http://192.168.x.x:8000/），同时确保电脑和手机连接到同一个Wi-Fi网络。

• Django的ALLOWED_HOSTS配置限制
  当前ALLOWED_HOSTS = []，DEBUG模式下仅允许localhost访问，当使用局域网IP访问时Django会拒绝请求。需将电脑的局域网IP添加到ALLOWED_HOSTS中，比如ALLOWED_HOSTS = ['192.168.x.x', 'localhost']，调试阶段也可临时设置为ALLOWED_HOSTS = ['*']（生产环境禁用此配置）。

• Django服务绑定地址问题
  默认启动Django服务的命令python manage.py runserver仅绑定127.0.0.1，只能本地访问。需改为绑定所有网卡：python manage.py runserver 0.0.0.0:8000，这样局域网内的设备才能正常访问服务。

• 防火墙或网络权限限制
  电脑的防火墙可能拦截了8000端口的入站请求，需临时关闭防火墙或添加允许8000端口的规则。同时确保安卓应用已申请网络权限，检查AndroidManifest.xml中是否包含<uses-permission android:name="android.permission.INTERNET" />。

• CORS中间件顺序错误
  查看MIDDLEWARE配置，CorsMiddleware被放在了XFrameOptionsMiddleware之后，还重复添加了CommonMiddleware。正确的顺序应该将CorsMiddleware放在靠前位置，调整后的MIDDLEWARE如下：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

重复的CommonMiddleware可能导致CORS响应头无法正确设置，进而引发跨域网络错误。

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