Question

我正在尝试使用React来使用基于Django Rest Framework的API，但是在超级简单方面存在一些主要问题。

给出以下简单的API方法：

from rest_framework.decorators import api_view, detail_route, list_route, permission_classes
@api_view(['GET'])
@permission_classes((AllowAny,))
def dummy(request, per_page=40):
    import json
    print("Returning the dummy")
    return Response({"Yeah":"Booo!"})

React中的此函数使用Axios来使用它：

import React, { Component } from "react";
import PropTypes from "prop-types";
import axios from 'axios';
class Dashboard extends Component{
    constructor(props){
        super(props);
        this.state = {
            username: props.username,
        };

        axios.defaults.xsrfCookieName = 'csrftoken';
        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
    }
    componentDidMount(){
        axios.get('/api/dummy/').then((response) => console.log(response));
    }

    render(){
            return(
                <div id="dashboardWrapper"></div>
            )
    }
}
export default Dashboard

使用Python的请求库和curl，该方法返回JSON对象。在浏览器中，加载此页面将运行GET函数，并且还将在“网络”选项卡中加载JSON对象。这使我相信问题不在Django的尽头。另外，我使用第三方API（https://dog.ceo/api/breeds/image/random）进行了尝试，并遇到了同样的问题。

当我在控制台中查看时，Axios GET函数将无法捕获从Django发送的响应。它的状态码为200，但无其他。完全没有response.data。使用console.log（response），我看到的只是错误和错误（已在不存在的端点上进行了测试）和有效的端点。

使用提取获得相同的结果。

奇怪的是，Axios POST可以工作，但之后也无法捕获任何响应。

原因和解决方案是什么？感谢您的帮助！

Answer 1

事实证明这是Firefox问题，而不是React或DRF问题。与以下内容相关：Object 'unavailable' in Firefox console

通过使用第一个答案中的第一个示例，我能够将其正确显示在浏览器控制台中：

axios.get('/api/dummy/') .then((response) => console.log("Data",JSON.stringify(response, null, 4)));

带有Django Rest框架响应（200）的React <不可用>

1 个答案: