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

我有以下情况

第一部分：

• 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
  }
})

---

有没有办法在初次获取后读取cookie并在浏览器中进行设置？

我最近在使用django和angular 2时遇到类似问题，django cors头的配置有问题

你的django cors头是什么？ 您不能同时设置allow all和allow凭据

这是不允许的：

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

改用：

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

---

我最近在使用django和angular 2时遇到了类似的问题，django cors头的配置有问题

你的django cors头是什么？ 您不能同时设置allow all和allow凭据

这是不允许的：

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

改用：

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

---

如果您能够在响应标题中看到cookie，但在浏览器的存储中看不到它们，则问题可能与cookie上的Samesite设置有关。默认情况下，django将cookie设置为

Samesite=Lax

，这会阻止cookie的跨源访问

在cookie设置中，您可以执行以下操作：

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

请注意，将cookie设置为

samesite=None

是危险的，应将其设置为

secure=True

，以确保仅在安全连接上访问cookie。但是在这种情况下，如果您在localhost上，您可以这样设置它，并确保为生产环境更改它

提供有关SameSite Cookie的更多详细信息

在

settings.py

文件中，还应通过设置以下各项来允许跨源请求：

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

您还应该确保在请求中使用credentials:true设置

。
请参阅如何进行设置。
如果您能够在响应标题中看到cookie，但在浏览器的存储中看不到它们，则问题可能与cookie上的相同站点设置有关。默认情况下，django将cookie设置为
Samesite=Lax
，这会阻止cookie的跨源访问

在cookie设置中，您可以执行以下操作：

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

请注意，将cookie设置为
samesite=None
是危险的，应将其设置为
secure=True
，以确保仅在安全连接上访问cookie。但是在这种情况下，如果您在localhost上，您可以这样设置它，并确保为生产环境更改它

提供有关SameSite Cookie的更多详细信息

在
settings.py
文件中，还应通过设置以下各项来允许跨源请求：

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

您还应该确保在请求中使用credentials:true设置
。
请参阅如何设置它。
我有CORS_ALLOW_CREDENTIALS=True和CORS_ORIGIN_WHITELIST=（'localhost:3000'、'127.0.0.1:3000'），但它没有帮助。啊，我知道了。。。我的ajax调用中没有这个：xhrFields:{withCredentials:true}我有CORS_ALLOW_CREDENTIALS=true和CORS_ORIGIN_WHITELIST=（'localhost:3000'，'127.0.0.1:3000'），但这没有帮助。啊，我知道了。。。我的ajax调用中没有这个：xhrFields:{withCredentials:true}