Question

我正在为我的API使用Django REST令牌身份验证。

我发布了我的凭据以获取令牌端点。但是，当我尝试以正确的方式设置标头时，它会继续响应http 401错误。我使用curl -X GET http://127.0.0.1:8000/events/ -H 'Authorization: Token 4d92d36768ca5d555b59cf68899eceab39c23704 '尝试了它，这确实有效！这是我的代码：

app.controller('HomeController', ['$scope','$http', function($scope,$http) {
    $scope.username = '';
    $scope.password = '';
    $scope.submitLogin = function () {
        var credentials = {
            username : $scope.username,
            password : $scope.password,
        };

        var req = $http.post('http://127.0.0.1:8000/api-token-auth/', credentials);
        req.success(function(data, status, headers, config) {
            $scope.token = data.token;
            var str1 = 'Token ';
            $scope.tokenheader = str1.concat($scope.token);
            $http.defaults.headers.common.Authorization = $scope.tokenheader;
        });
        req.error(function(data, status, headers, config) {
            alert( "failure message: " + JSON.stringify({data: data}));
        });
    };
    $scope.getEvents = function () {
        var req = {
            method: 'GET',
            url: 'http://127.0.0.1:8000/events/',
        }
        $http(req).then( 
           function() {
                       console.log('succes')
           }, 
           function(){
                       console.log('fail') 
        });
    };
}]);

Chrome开发工具中的错误消息：

XMLHttpRequest cannot load http://127.0.0.1:8000/events/. 
Response for preflight has invalid HTTP status code 401

如何摆脱这401错误？

编辑：我刚发现错误在于我没有在我的API上安装CORS。我在chrome中使用了一个CORS插件，用于我api的身份验证部分，但不适用于我的事件url！

Answer 1

您需要在标题中添加令牌：

get($http, "/some_url", {headers: {"Authorization": "Token " + $your_token}}
    ....
    ....
);

响应代码401表示未经授权。如果您使用基于令牌的身份验证，那么在失败的情况下，它将是403，Forbidden。所以我的猜测是它的用户名/密码正在弄乱它。在您的curl示例中，您没有使用它们。

Answer 2

您是否检查过该令牌是否已实际添加到您的请求中？

您可以使用Chrome开发者工具执行此操作。

我个人更喜欢使用$ httpprovider.interceptor，如下所述：

angularjs $httpProvider interceptor documentation

这可确保令牌始终存在于任何呼叫中。

如果您要访问多个API，则应考虑添加以下内容：

           $httpProvider.interceptors.push(['$q', '$location', '$log', 'loginService', 'restHelperService',
            function ($q, $location, $log, loginService, restHelperService) {
                return {
                    request: function (config) {
                        // check if the request comes with an url
                        if (config.url) {
                            // check that the call is to the REST api, if yes add token
                            if (restHelperService.isRestCall(config.url)) {
                                // add auth header or revert to login
                                if (loginService.userIsLoggedIn()) {
                                    config.headers = config.headers || {};
                                    config.headers.Authorization = 'Token ' + loginService.getToken().token;
                                } else {
                                    $location.path('/login');
                                }
                            }
                        }
                        return config;
                    },
                    responseError: function (response) {
                        if (response.status === 401 || response.status === 403) {
                            // clear auth token if the REST call failed with the current token
                            if (response.config && response.config.url && restHelperService.isRestCall(response.config.url)) {
                                $log.debug(" restCall failed due to bad credentials, resetting credentials");
                                loginService.resetCredentials();
                                $location.path('/login');
                            }
                        }
                        return $q.reject(response);
                    }
                };
            }]);
    }])

这可以避免在您开始将令牌添加到不期望它们的API调用时出现的问题。此外，代码还可确保在凭据无效时，用户将自动重定向到登录页面。

这个例子，我正在使用两个额外的服务。用于管理令牌的loginService和用于管理REST框架的URL的restHelperService。

我建议做同样的事情，否则很难从控制器外部访问凭据。

AngularJS中的授权标头无效

2 个答案: