Question

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

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

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

我的角度应用程序是独立于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的回应。我正在使用Allow CORS chrome扩展作为临时修复程序，尝试访问api而不会收到CORS策略错误。

我的问题

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

Answer 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。为了进一步解释这一点，无论何时以角度进行呼叫，您的请求都会与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：基于会话的身份验证

1 个答案: