React Native对接Django JWT登录时出现TypeError问题求助

问题场景 #

开发React Native应用，后端采用Django并通过rest_framework_simplejwt配置JWT认证，登录界面已完成，但登录时抛出错误：

LOG  error [TypeError: Cannot read property 'status' of undefined]

已完成的配置和尝试：

• 搭建了React Native登录界面
• Django端配置了JWT认证及CORS跨域（允许所有来源）
• 已确认corsheaders安装配置正确、后端端点http://127.0.0.1:8080/api/token/可访问、打印了完整错误对象

相关代码 #

React Native登录逻辑

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");

const handleSubmission = async () => {
    try {
        const response = await axios.post("http://127.0.0.1:8080/api/token/", {
            username,
            password,
        });
        if (!response || !response.data) {
            throw new Error("Invalid server response");
        }
        await AsyncStorage.setItem("accessToken", response.data.access);
        await AsyncStorage.setItem("refreshToken", response.data.refresh);
        navigation.navigate("Tab");
    } catch (error) {
        console.error("error", error);
        const errorMessage = error.response && error.response.data && error.response.data.message
            ? error.response.data.message
            : "Whoops! Log In Failed, please try again later 😅.";
        setError(errorMessage);
    }
};

Django端用户创建视图

@api_view(['POST'])
@permission_classes([IsAuthenticated])
def create_user(request):
    serializer = CreateUserSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response({'message': "Whoops! error while creating user 🫣", 'error': serializer.errors}, status=status.HTTP_400_BAD_REQUEST)

Django用户序列化器

class CreateUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'password']

    def create(self, validated_data):
        validated_data['password'] = make_password(validated_data.get('password'))
        return super(CreateUserSerializer, self).create(validated_data)

Django CORS配置（settings.py）

INSTALLED_APPS = [
    'corsheaders', # DEV ONLY
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # DEV ONLY
    ...
]

CORS_ALLOW_ALL_ORIGINS = True # DEV ONLY

解决方案 #

1. 修复错误处理逻辑，避免TypeError #

错误Cannot read property 'status' of undefined的核心原因是：当请求未到达后端（比如网络错误、后端未启动）时，error.response为undefined，直接访问其属性会触发TypeError。修改catch块的错误处理逻辑：

catch (error) {
    console.error("error", error);
    let errorMessage;
    if (error.response) {
        // 请求到达后端，返回了错误响应
        errorMessage = error.response.data?.message || `登录失败，状态码：${error.response.status}`;
    } else if (error.request) {
        // 请求已发送但未收到响应
        errorMessage = "未收到服务器响应，请检查后端服务状态";
    } else {
        // 请求配置或其他错误
        errorMessage = error.message || "登录失败，请稍后重试";
    }
    setError(errorMessage);
}

2. 修正模拟器/真机的网络访问地址 #

如果在模拟器上运行React Native，127.0.0.1指向模拟器自身，而非电脑的本地后端服务：

• Android模拟器：替换为http://10.0.2.2:8080/api/token/
• iOS模拟器：可使用http://localhost:8080/api/token/
• 真机测试：使用电脑的局域网IP（比如http://192.168.1.100:8080/api/token/）

3. 修复用户创建视图的权限配置 #

create_user视图添加了@permission_classes([IsAuthenticated])，意味着注册用户需要先登录，这违背了注册逻辑的合理性，移除该装饰器：

@api_view(['POST'])
# 移除IsAuthenticated，允许匿名用户注册
def create_user(request):
    serializer = CreateUserSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response({'message': "Whoops! error while creating user 🫣", 'error': serializer.errors}, status=status.HTTP_400_BAD_REQUEST)

4. 验证JWT端点的路由配置 #

确保Django的urls.py正确配置了simplejwt的Token获取路由：

from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView

urlpatterns = [
    # 其他路由
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

5. 确认后端服务状态 #

用Postman或curl测试后端端点http://127.0.0.1:8080/api/token/，确保能正常返回响应：

• 发送POST请求，携带username和password参数，验证是否能获取access和refresh token
• 若返回401，检查用户名密码是否正确；若返回404，检查路由配置是否正确

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