AngularJs + Django RESTful：基于会话的身份验证答案

【问题标题】：AngularJs + Django RESTful: session based authenticationAngularJs + Django RESTful：基于会话的身份验证
【发布时间】：2017-04-13 16:22:11
【问题描述】：

我正在开发一个 Angular Web 应用程序，它将取代我们现有的网站。当前网站使用基于会话的身份验证。目前，我无法通过 get 或 post 请求访问托管 API。

我正在使用 python 简单服务器在本地计算机上开发 angular 应用程序，而 api 是在线托管的。

我希望找到一个完全有角度的修复程序，因为我无法在没有帮助的情况下更改 API（它是我的老板前段时间编写的，现在用于生产版本）。我没有登录页面，所以我只是想在我的标头和请求中提供身份验证信息。

我的 Angular 应用程序是独立于 django 编写的。我只想访问 django 后端

到目前为止，我正在尝试以下设置标题：

app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'csrftoken';
  $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
  $httpProvider.defaults.headers.common = {'username': btoa('myUsername'), 'password': btoa('myPassword')
};
}]);

在我的服务中：

app.factory('Test', ['$resource', function($resource) {
  return $resource('https://www.phonywebsite.org/en/api/test/')
};

我总是遇到 301、400 和 403 错误。最近主要是 301 错误，我没有从 api 得到响应。我正在使用允许 CORS chrome 扩展作为临时修复，以尝试访问 api 而不会出现 CORS 策略错误。

我的问题

如何在不使用 chrome 扩展程序的情况下修复 CORS 错误？
如何向使用基于会话的身份验证的 django 后端提供身份验证，以确保其查找的 csrf cookie 位于标头中？

【问题讨论】：

标签： angularjs cookies cors csrf django-rest-auth

【解决方案1】：

要回答您的第一个问题，使用 cors 扩展是一种临时解决方案，并且大多数情况下都不应该使用，因为您的客户可能不会使用它。要处理 CORS，您需要了解跨站点 API 调用的工作原理。简而言之，CORS 是一种允许 AJAX 请求绕过其相同来源限制的机制。要处理这种情况，您需要更新后端并添加

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

。添加此内容后，您的 settings.py 应该会停止遇到 CORS 问题。

为了回答您的第二个问题，Angular 已经为您提供了对 CSRF 的支持，因此您已经赢了一半。您需要做的是在您的模块上添加一个补丁以开始接受 csrf 令牌（名称在角度上有点不同）。你已经做到了，并且做得很好：

var app = angular.module('app', ['...']);

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);

这样做的目的是确保每当您进行 $http 调用时，您的 csrf 令牌也已设置。

作为一个学习机会，您也可以尝试使用 ng-cookies。为了进一步解释这一点，每当您在 angular 中进行调用时，您的请求也会与 cookie 捆绑在一起，因此您可以在 request.COOKIES 中轻松访问它们。

您还需要更改调用 API 的方式，例如：

app.factory('APIService', function ($http) {
  return $http({url: 'https://www.phonywebsite.org/en/api/test/',
                method: 'GET'})
}

您显然可以对此进行修改，但我认为这显示了 $http 的用法，以使您了解一般要点。

您也可以尝试在此处为您的应用程序添加更多身份验证（或将 django auth 替换为您自己的自定义身份验证），但这取决于您的用例。

希望这会有所帮助。

【讨论】：