Question

我正在开发一个DJANGO + AngularJS应用程序，其中角度部分不是由django提供的。

我按如下方式设置角度$httpProvider：

myApp = angular.module('myApp', [])

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

然后，在做任何POST之前，我做了一个设置cookie的GET。我可以通过Chrome确认已设置Cookie：

set-cookie:csrftoken=hg88ZZFEdLPnwDdN1eiNquA8YzTySdQO; expires=Tue, 19-Aug-2014 12:26:35 GMT; Max-Age=31449600; Path=/

（在Chrome开发者工具的资源/ cookies / localhost中可见）

但是，当我执行POST时，没有设置X-CSRFToken标头

这是Chrome记录的POST：

POST /data/activities/search HTTP/1.1
Host: localhost:14080
Connection: keep-alive
Content-Length: 2
Accept: application/json, text/plain, */*
Origin: http://localhost:14080
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:14080/public/html/main.html?codekitCB=398694184.799418
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=hg88ZZFEdLPnwDdN1eiNquA8YzTySdQO

为什么没有设置标头？我还应该做些什么才能激活此功能？

（旁注：如果我在$ http（）调用中手动传递标头，则POST请求正常工作..因此问题实际上是AngularJS未设置的标头）

Answer 1

非常简单的答案：它只能从版本1.2.0开始提供，目前是版本候选版本。

Answer 2

使用Safari或Firefox时，1.2.0更新对我来说还不够（Chrome一直都很好用）。 Safari和Firefox的问题是Django后端没有在HTTP响应中发送csrf-cookie。

我必须做的是将@ensure_csrf_cookie装饰器添加到我的视图函数中，该函数为Angularjs构建页面。

@ensure_csrf_token
def my_view(request):
    ...

并在javascript文件中：

myApp.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}

至少现在我不知道为什么Chrome没有它，但其他浏览器没有。

Answer 3

我有一个类似的问题，这是我的错。这是令人尴尬的。

我的错误：

$.post('/url', data)

确保您使用的是$http对象！

$http.post('/url', data)

犯这个错误非常容易，因为两者似乎同样有效，除了前者不看$http.defaults.headers.common['X-CSRFToken']等。

Answer 4

app.config(["$httpProvider", function($httpProvider) {
    var csrfToken = getCookie('csrftoken');
    $httpProvider.defaults.headers.common['X-CSRFToken'] = csrfToken; 
}])

getCookie（）取自https://docs.djangoproject.com/en/dev/ref/contrib/csrf/

或单独设置每个方法

 $httpProvider.defaults.headers.post['X-CS....
 $httpProvider.defaults.headers.get['X-CS....

Answer 5

角度变化非常频繁，某些答案不适用于最新版本。无论如何，由于Angular需要XSRF-TOKEN cookie名称并发送X-XSRF-TOKEN标题，我们可以简单地告诉Django默认使用这些：

CSRF_COOKIE_NAME = 'XSRF-TOKEN'
CSRF_HEADER_NAME = 'HTTP_X_XSRF_TOKEN'

第一个设置（参见docs）是csrf标记的cookie名称，而第二个设置（参见docs，仅在1.9中引入）是相应的标题名称。

最后，仅供参考，不要忘记设置：

CSRF_COOKIE_HTTPONLY = False

AngularJS中未设置XSRF标头

5 个答案: