使用AngularJs发布请求时未设置CSRF Coo​​kie - Django Backend

时间:2015-12-10 16:20:26

标签: angularjs ajax django post csrf

我正在使用angularjs和django构建一个Web应用程序,并且我通过Ajax请求提交表单。

我的问题是,当发布带有角度的Ajxa请求(精确地为ng-file-upload)时,未设置django所期望的csrfmiddlewaretoken。

在我关于角度文档和其他论坛的讲座中,我最终得到了以下配置。

在angular的配置部分:

$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.withCredentials = true;

在我的控制器中,发送请求的代码是:

Upload.upload({
                url: 'http://localhost:8000/image',
                headers: {
                  'X-CSRFToken': $cookies['csrftoken']
                },
                data: {file: file}
            })

使用该代码,请求发送具有以下标题:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2,fi;q=0.2
Connection:keep-alive
Content-Length:16582
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarybWo821vSwcejTATP
Cookie:csrftoken=bC2UpXurGXAg3AUZgSqMVlUs8TKfussS
Host:localhost:8000
Origin:http://127.0.0.1:8000
Referer:http://127.0.0.1:8000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36
X-CSRFToken:UeSt4LoqgU9L28JQBdVbS2IJJXOMQK6n

然而,为了让django能够正确处理csrf保护,以下标题缺失

Cookie:_ga=GA1.1.1358238168.1447425523; XSRF-TOKEN=zWIM6q7O2Nz3PLm8TMUJSLFVRF8bKUbr; csrftoken=UeSt4LoqgU9L28JQBdVbS2IJJXOMQK6n

到目前为止,尽管已经看过很多有关此主题的论坛,但我还是没有设置此标题。如果我尝试通过以下方式以编程方式设置它:

Upload.upload({
                url: 'http://localhost:8000/image',
                headers: {
                  'Cookie': 'csrftoken='+$cookies['csrftoken']
                },
                data: {file: file}
            })

我最终在我的控制台中出现以下错误:

Refused to set unsafe header "Cookie"

我的问题是如何从客户端配置cookie头。我的django代码很好。

我一直在努力解决这个问题很长一段时间。任何帮助,将不胜感激 !感谢

1 个答案:

答案 0 :(得分:2)

如果您在csrftoken中添加了客户端标题:{'X-CSRFToken': $cookies['csrftoken']}表示您的客户端很可能已准备就绪,但出于安全问题,如果您从外部应用程序与django api进行交互,他仍会阻止请求返回不安全标题“Cookie”。 尝试以下配置以允许跨应用程序的跨站点请求:

pip install django-cors-headers

然后将其添加到 settings.py

中已安装的应用中
INSTALLED_APPS = (
...
'corsheaders',
...
)

您还需要添加一个中间件类来收听回复并确保您遵守以下命令:

MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
)

最后添加此设置变量:

CORS_ORIGIN_ALLOW_ALL = True

这应该足够了,但是对于更多自定义配置,您可以查看django-cors-headers