Django REST API与ReactJS注册接口200状态下异常及TypeError问题

我来帮你捋捋你遇到的这两个问题——其实它们是关联在一起的，咱们一步步拆解解决：

1. 前端TypeError的直接原因 #

你的React代码里犯了一个小细节错误：response.json是一个方法，不是直接可读取的属性，你得调用它（加括号）才行，而且它返回的是一个Promise，所以你的响应处理链需要调整：

错误的原代码： #

.then( (response) => {
    console.log("We did it!");
    console.log(response.json);
} )

修复后的代码： #

.then( (response) => {
    console.log("We did it!");
    return response.json(); // 调用json()方法，返回解析后的Promise
} )
.then( (data) => {
    console.log("接口返回的数据：", data); // 这里就能拿到你预期的returnData.data了
} )

你之前没调用response.json()，直接打印了方法本身，这不仅会导致前端报TypeError，还会因为没有正确消费响应流，让客户端提前关闭连接——这就是服务器端出现ConnectionResetError: [Errno 54] Connection reset by peer的核心原因。

2. 服务器端ConnectionResetError的解决 #

当你修复前端的响应处理逻辑后，服务器端的这个错误基本会自动消失，因为客户端会等待服务器完整发送响应后再断开连接。另外，我注意到你的Django视图里有冗余代码，可以优化一下，让逻辑更清晰：

优化后的视图代码： #

class SignUp(APIView):
    parser_classes = (JSONParser,)
    permission_classes = (AllowAny,)
    
    def post(self, request, format=None):
        # 合并重复的参数校验逻辑
        if 'username' not in request.data or 'password' not in request.data:
            raise ParseError('Username or password not provided')
        
        # 如果用户已登录，直接返回当前用户信息（这里逻辑可以根据需求调整）
        if request.user.is_authenticated:
            return Response(UserSerializer(request.user).data)
        
        username = request.data['username']
        password = request.data['password']
        print(username, password)
        
        user = User.objects.create_user(username=username, password=password)
        # 注意：如果你的API用的是Token认证而非Session，这里的login调用可以省略
        login(request, user)
        
        return_data = UserSerializer(user)
        print(return_data.data)
        return Response(return_data.data)

3. 额外的注意事项 #

• 跨域配置：因为前端和后端是不同端口的localhost，务必确保Django配置了CORS支持，推荐用django-cors-headers库来快速处理，避免OPTIONS请求的潜在问题。
• CSRF Token校验：你当前获取CSRF Token的方式没问题，但要确保页面上的元素id确实是token——比如在Django模板里手动指定：<input type="hidden" id="token" name="csrfmiddlewaretoken" value="{{ csrf_token }}">，避免因为元素找不到导致Token为空。

按照上面的步骤调整后，你应该就能正常拿到接口返回的用户数据，同时服务器端的错误也会消失啦。

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