AngularJs + Django RESTful: session 基于身份验证

Question

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

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

我更愿意找到完全在 angular 中的修复程序，因为我无法在没有帮助的情况下更改 API（它是我老板不久前写的，现在用于生产版本）。我没有登录页面，所以我只是想在我的 header 和请求中提供身份验证信息。

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

到目前为止，我正在尝试以下方法来设置 headers：

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 的回复。我正在使用 Allow CORS chrome 扩展作为临时修复，尝试在不出现 CORS 策略错误的情况下访问 api。

我的问题

如何在不使用 chrome 扩展的情况下修复 CORS 错误？
如何向使用基于 session 的身份验证的 django 后端提供我的身份验证，确保其查找的 csrf cookie 在 header 中？

Answer 1

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

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

。一旦你添加了这个，你的 settings.py 就应该停止出现 CORS 问题。

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

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 身份验证替换为您自己的自定义身份验证），但这取决于您的用例。

希望对您有所帮助。

AngularJs + Django RESTful: session 基于身份验证

AngularJs + Django RESTful: session based authentication

cookies

csrf

cors

angularjs

django-rest-auth