Question

我在Django Rest框架中编写了一个简单的视图，并在Web浏览器中进行测试：

@api_view(['Get', 'Post'])
@permission_classes((AllowAny,))
@method_decorator(csrf_exempt, name='dispatch')
def hello_world(request):
    print(request.data)
    if request.method == 'POST':
        return Response({"message": "Got some data!", "data": request.data})
    return Response({"id":201,"content":"Hello, World!"})

尝试使用Ajax，使用jQuery和AngularJs来使用它。

的jQuery

对于jQuery，我使用下面的代码：

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    ContentType: "application/json",
                    url: "http://127.0.0.1:8000/test/",
                    "data": data,
                    success: function(inp_data, status, jqXHR){
                        console.log('success');
                        console.log(JSON.stringify(inp_data));
                        },
                    error: function(xhr, errMsg) {
                        console.log('failure');
                        console.log(errMsg);
                        console.log(xhr.status + ": " + xhr.responseText);
                        }
                    });

并收到：

1）在后端：

<QueryDict: {'key1': ['value1']}>
[26/Oct/2017 11:20:34] "POST /test/ HTTP/1.1" 200 15

2）在前端控制台：

failure (11:20:35:881 | null)
  at public_html/index.html:132
error (11:20:35:887 | null)
  at public_html/index.html:133
0: undefined (11:20:35:888 | null)
  at public_html/index.html:134

因此，使用jQuery，我可以将数据从前端发送到后端，但是可以反向执行。

AngularJs

我尝试使用以下html代码发出请求：

<html ng-app="demo">
    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div ng-controller="Hello">
            <p>The ID is {{greeting.id}}</p>
            <p>The content is {{greeting.content}}</p>
        </div>
    </body>
</html>

和js：

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    console.log('wait for response');
    $http.get('http://127.0.0.1:8000/test/').
        then(function(response) {
            console.log('get response');
            $scope.greeting = response.data;
        });
    console.log('finished');
});

运行上面的代码后，我收到：

1）在后端：

<QueryDict: {}>
[26/Oct/2017 12:33:06] "GET /test/ HTTP/1.1" 200 36

2）在前端控制台：

wait for response (12:33:06:150 | null)
  at public_html/hello.js:8
finished (12:33:06:163 | null)
  at public_html/hello.js:14

那么为什么我不能在jQuery和AngularJS展台上收到我的DRF响应？

更新

在Chrome控制台中找到它：

XMLHttpRequest cannot load http://127.0.0.1:8000/test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.
:8383/favicon.ico Failed to load resource: net::ERR_EMPTY_RESPONSE

当我通过Django（带有{％verbatim％}）而不是NetBeans（我喜欢用它来编写前端）渲染AngularJs代码时，它工作正常。因此，如果我不想使用Django Rest Framework与NetBeans IDE交朋友，我认为应该启用CORS。

Answer 1

问题在于我从NetBeans运行我的前端这一事实。 NetBeans＆＃39;控制台非常好，但Chrome的一个让我了解CORS冲突。我不知道为什么在django的输出中没有CORS冲突显示，但当我安装了django-cors-headers＆＃39;根据官方docs并设置：

CORS_ORIGIN_ALLOW_ALL=True

在我的settings.py中，它开始工作!!!

Answer 2

在django rest框架请求中，request.data中不存在GET参数。它们是查询参数而不是数据。所以他们被置于request.query_params之下。从get request中的request.query_params访问数据

see the doc

尝试此操作以获取POST和GET数据

@api_view(['Get', 'Post'])
@permission_classes((AllowAny,))
@method_decorator(csrf_exempt, name='dispatch')
def hello_world(request):
    if request.method == 'POST':
        print(request.data)
        return Response({"message": "Got some data in POST!", "data": request.data})
    if request.method == 'GET':
        print(request.query_params)
        return Response({"message": "Got some data in GET!", "data": request.query_params})
    return Response({"detail":"Invalid request type"}, status=400)

不能使用我的Django Rest Framework API与Ajax

2 个答案: