Question

我有以下情况。

第一部分：

localhost：3000是前端（React）
localhost：8000是后端（Django）
我做了一个成功的跨域GET（我正在使用django-cors-headers包）

部分回复标题：

Set-Cookie: csrftoken=token; expires=Fri, 16-Feb-2018 10:56:00 GMT; Max-Age=31449600; Path=/

没有在浏览器中设置cookie csrftoken（如果我是对的，这是由于浏览器忽略了来自不同域的cookie），尽管我已将其设置为允许第三方cookie和网站数据（在Chrome中）设置）
由于未设置csrf cookie而导致POST失败

第二部分：

我手动设置了Cookie
一切都很完美

这是我的ajax请求：

jQuery.ajaxSetup({
  beforeSend: function(xhr, settings) {
    xhr.setRequestHeader("X-CSRFToken", csrftoken);
  }
});

jQuery.ajax({
  url: url,
  type: 'POST',
  data: {attr: value, csrfmiddlewaretoken: csrftoken},
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  }
})

是否有任何方式在初始GET之后读取cookie并在浏览器中设置它？

Answer 1

我最近有类似的问题使用django和angular 2，我的django-cors-headers配置有问题。

你的django-cors-headers是什么？您不能同时设置allow all和allow credentials。

这是不允许的：

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

改为使用：

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'localhost:3000',
    '127.0.0.1:3000'
)

Set-Cookie response header not working using Angular 2 + django-rest-framework

Answer 2

如果您能够在响应标题中看到cookie，但在浏览器的存储中看不到它们，则该问题可能与 Samesite 设置有关Cookie。默认情况下，django使用Samesite=Lax设置cookie，以防止对cookie进行跨域访问。

在Cookie设置上，您可以执行以下操作：

response.set_cookie('csrf_token', token, max_age=31449600, samesite=None, secure=False)

请注意，使用samesite=None设置cookie是危险的，应该使用secure=True设置cookie，以确保仅在安全连接上访问cookie。但是在这种情况下，只要您在本地主机上，就可以像这样进行设置，并确保针对生产环境进行更改。

The MDN Documentation on SameSite cookies提供了有关SameSite Cookie的更多详细信息。

在settings.py文件中，还应通过设置以下内容来允许跨域请求：

CORS_ALLOW_CREDENTIALS = True
CORS_ALLWED_ORIGINS = [
    'http://localhost:8000',
    'http://localhost:3000'
]

您还应该确保在请求中设置withCredentials: true。有关如何设置的信息，请参见to this post。

从后端发送的Cookie未在前端设置

2 个答案: