Question

我正在尝试在我的网站上使用“PUT＆＃39;请求我的网络服务器。最初我的代码如下所示。

我的HTML表单：

<form data-ng-submit="submit()" ng-controller="registrationController">
    Please enter your device key
    <input type="text" ng-model="text" name="text">
    <input type="submit" id="submit" value="Submit">
</form>

我的Javascript：

homeApp.controller('registrationController', function($scope, $http) {
    $scope.submit = function() {
        if ($scope.text) {
            $http({
                method: 'PUT',
                url: '/api/v1/device_registration/2345',
                data: '',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            });
            $scope.text = 'changeTextTest';
        };
    };
});

在表单提交上，我可以看到文本更改为＆＃39; changeTextTest＆＃39;但是在我终端的输出中（来自./manage.py runserver）我可以看到输出状态为403

"PUT /api/v1/device_registration/2345 HTTP/1.1" 403 58

我认为这是因为我没有发送CSRF令牌所以我在功能范围中添加了$ cookies。

homeApp.controller('registrationController', function($scope, $http, $cookies) {

现在提交我

"GET /app/?text=randomInputText HTTP/1.1" 200 2881

我的浏览器中的网址变为

http://127.0.0.1:8000/app/?text=randomInputText

这里出了什么问题？

Answer 1

听起来Angular并没有真正停止发送原始请求。如果你将Angular从等式中取出，你现在拥有的<form>将发送一个与你看到的非常类似的GET请求。

确保测试发送请求（使用浏览器的开发人员工具中的网络监视器进行检查），并确保Angular实际上停止了基础GET请求的通过。您还应该检查以确保您的网页上包含$cookies提供商，因为没有它可以解释为什么Angular不会拦截表单提交。

一旦您回到应用程序触发PUT请求并出现403错误的状态，请再次检查您的网络监视器。它应该允许您查看响应，该响应将告诉您无法进行身份验证或者您有权限问题。如果您未通过身份验证，这很可能意味着您使用SessionAuthentication进行身份验证，但未传递CSRF标头。

您可以告诉Angular使用以下代码片段注入特殊标头。

var my_app = angular.module('myApp', [/* other dependencies */, 'ngCookies']).run(function($http, $cookies) {
    $http.defaults.headers.put['X-CSRFToken'] = $cookies.csrftoken;
});

此代码段是从django-angular documentation中提取的，但不是特定于该程序包。

AngularJS / DRF - 表示在点击时发送'GET'而不是'PUT'

1 个答案: