AngularJS / DRF - 点击时发送“GET”而不是“PUT”的表单

Question

我正在尝试通过向我的网络服务器发送“PUT”请求在我的网站上获取我的注册表单。最初我的代码如下所示。

我的 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';
        };
    };
});

在提交表单时，我可以看到文本更改为“changeTextTest”，但是在终端的输出中（来自 ./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

我的浏览器中的 URL 更改为

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

这里出了什么问题？

Answer 1

听起来 Angular 实际上并没有阻止发送原始请求。如果您不考虑 Angular，您现在拥有的 <form> 将发送一个与您看到的非常相似的 GET 请求。

确保测试请求是否正在发送（使用浏览器开发者工具中的网络监视器检查），并确保 Angular 实际上阻止了底层 GET 请求通过。您还应该检查以确保您的页面中包含 $cookies 提供程序，因为没有它可以解释为什么 Angular 没有拦截表单提交。

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

您可以告诉 Angular 使用以下 sn-p 代码注入特殊标头。

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

这个 sn-p 是从 django-angular documentation 中提取的，但不是特定于包的。