angularjs - 无法在angularjs中创建post请求包含crsf

Question

我想发布数据到django应用程序，我使用angularjs http发布。当我发布数据时，我收到 403 禁止。所以，我将我的 Angular 脚本更改为:

var app = angular.module('omCenterLoginApp',['ngCookies']);
 app.config(['$httpProvider', function ($httpProvider,$cookies) {
      $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
      $httpProvider.defaults.xsrfCookieName = 'csrftoken';
}])

app.controller('omCenterLoginContr',function($scope,$http){
    $scope.login = function(){
        var user = $scope.username;
        var password = $scope.password;
        $http({
            method: 'POST',
            url:'http://172.100.1.8:8080/api/test/',
            data:{user:password},
        }).then(function successCallback(response){
               console.log(response.data)
               },function errorCallback(response){
                console.log(response.data) 
            })
    }
});

我补充说，

$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; $httpProvider.defaults.xsrfCookieName = 'csrftoken';

但是，当我尝试发布它时，仍然收到 403 错误响应。我检查了 post http header 。里面没有 X-CSRFToken。

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:2
Content-Type:application/json;charset=UTF-8
Host:172.100.1.8:8080
Origin:http://172.100.1.8
Pragma:no-cache
Referer:http://172.100.1.8/login.html?
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

我的angularjs版本:1.5.8

但是当我尝试访问 url http://172.100.1.8:8080/api/test/,I 时可以获得回应。

http请求是:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Cookie:sessionid=jbg90n8118w6qhcmbom8txctui2s59ca; csrftoken=tBsTGiBtcgMOw8MFslu6v3UJEdSXkmYF
Host:172.100.0.48:8080
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 

csrftoken 存在。

提前感谢您的帮助。

Answer 1

这是通过单页应用程序使用 CSRF 的一种相当复杂的方法，除非您通过 Django 提供页面服务。在使用 Single Page App 访问 Django API 时尝试使用其他形式的身份验证，例如 Token Auth 或 JWT Auth。这可以通过优秀的 Django Rest Framework 轻松实现.即使您不喜欢使用它，也可以简单地使用一些身份验证库，例如 django-oauth .只是为了测试，您可以使用 csrf_exempt允许你的 Angular 应用程序发送没有 csrf token 的请求的装饰器(虽然你用这个打开了你的代码的漏洞)。使用某种身份验证始终是一个好习惯。