一尘不染

AngularJS + Django Rest Framework + CORS(客户端未显示CSRF Coo​​kie)

angularjs

我正在使用AngularJS和Django Rest Framework + Django CORS Headers开发1页应用程序。

我的问题是,当我联系后端时,“ csrftoken” cookie永远不会显示在浏览器中。

例如:我正在使用帖子进行登录。我正确地获得了“ sessionid” cookie,但是“
csrftoken”却没有显示,因此我无法从客户端进行适当的发布,因为由于缺少csrf令牌而被拒绝了。

  • 我已经分析了来自API的响应标头,而csrftoken却不是。
  • 我直接在其余的API浏览器中查看,并在那显示很好。
  • 只是指出,我可以做我的第一个POST登录,因为Django Rest Framework仅对经过身份验证的用户强制CSRF。如果我尝试重新登录,它将因为显示“ sessionid” -cookie而失败。
  • 我对绕过CSRF的保护并不感兴趣,就像关于stackoverflow的一些帖子所建议的那样。

来自前端/后端的一些代码片段。这些都是未完成的代码段,因此请不要挂在写得不好的代码上。

后端API LoginView

class LoginView(APIView):

renderer_classes = (JSONPRenderer, JSONRenderer)

def post(self, request, format=None):
    serializer = LoginSerializer(data=request.DATA)

    if serializer.is_valid():
        userAuth = authenticate(username=serializer.data['username'], password=serializer.data['password'])

        if userAuth:

            if userAuth.is_active:
                login(request, userAuth)

                loggedInUser = AuthUserProfile.objects.get(pk=1)
                serializer = UserProfileSerializer(loggedInUser)

                user = [serializer.data, {'isLogged': True}]



        else:
            user = {'isLogged': False}

        return Response(user, status=status.HTTP_200_OK)

    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

客户端AngularJS登录控制器

.controller('LoginCtrl', ['$scope', '$http', 'uService', '$rootScope', function(scope, $http, User, rootScope) {

scope.login = function() {

    var config = {
        method: 'POST',
        withCredentials: true,
        url: rootScope.apiURL+'/user/login/',
        data : scope.loginForm
    };

    $http(config)
    .success(function(data, status, headers, config) {

        if (status == 200) {
            console.log(data[0]); //Test code
            // succefull login
            User.isLogged = true;
            User.username = data.username;

        }
        else {
            console.log(data); //Test code
            User.isLogged = false;
            User.username = '';
        }

    })
    .error(function(data, status, headers, config) {
        console.log('Testing console error');
        User.isLogged = false;
        User.username = '';
    });
};

}]);

任何有好的技巧/想法/例子的人吗?


阅读 245

收藏
2020-07-04

共1个答案

一尘不染

因此,我找到了自己的解决方案,似乎效果很好。

这是我的代码的新片段:

后端API LoginView(添加了强制将csrf令牌添加到主体的装饰器)

class LoginView(APIView):

renderer_classes = (JSONPRenderer, JSONRenderer)

@method_decorator(ensure_csrf_cookie)
def post(self, request, format=None):
    c = {}
    c.update(csrf(request))
    serializer = LoginSerializer(data=request.DATA)

    if serializer.is_valid():
        userAuth = authenticate(username=serializer.data['username'], password=serializer.data['password'])

        if userAuth:

            if userAuth.is_active:
                login(request, userAuth)

                loggedInUser = AuthUserProfile.objects.get(pk=1)
                serializer = UserProfileSerializer(loggedInUser)

                user = [serializer.data, {'isLogged': True}]



        else:
            user = {'isLogged': False}

        return Response(user, status=status.HTTP_200_OK)

    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

AngularJS客户端(将令牌添加到请求标头)

$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;

服务器端设置文件(专门用于django-cors-headers)

默认情况下会添加前5个,但您需要添加“ X-CSRFToken”以允许使用CORS从客户端到API的此类标头,否则该帖子将被拒绝。

CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'X-CSRFToken'

而已!

2020-07-04