Django出现Forbidden (CSRF cookie not set.)错误求助

问题背景 #

搭建Django服务初期，编写了处理POST请求的Product视图，React前端发送请求时触发「Forbidden (CSRF cookie not set.): /products/」错误。已配置settings.py中CSRF相关参数，前端能获取有效CSRF Token并在请求头携带，但问题仍存在。临时添加@csrf_exempt装饰器可正常请求，但存在安全风险，需正规解决方案。

问题排查点 #

• CSRF_COOKIE_DOMAIN配置错误：该参数应为字符串格式域名，而非列表，当前列表格式会导致CSRF Cookie无法正确绑定域名
• 跨域请求未配置credentials，浏览器拒绝携带Cookie
• 前端请求域名与Django信任域名不统一（混用127.0.0.1和localhost）
• 缺失CSRF_COOKIE_SAMESITE配置，影响跨域Cookie传递

解决方案 #

1. 修正settings.py关键配置 #

# 修正CSRF_COOKIE_DOMAIN为字符串格式
CSRF_COOKIE_DOMAIN = "localhost"

# 添加SameSite配置，适配跨域场景
CSRF_COOKIE_SAMESITE = "Lax"
# 若为HTTPS生产环境或需严格跨域带Cookie，可改为：
# CSRF_COOKIE_SAMESITE = "None"
# CSRF_COOKIE_SECURE = True

# 保持信任域名格式统一
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:3000",
]

2. 调整前端请求代码 #

核心添加credentials: "include"确保跨域携带Cookie，统一请求域名：

function getCSRFToken() {
  const csrfCookie = document.cookie.match(/(^|;)csrftoken=([^;]+)/);
  return csrfCookie ? csrfCookie[2] : "";
}

const handleSubmit = (e) => {
  e.preventDefault();
  const csrfToken = getCSRFToken();

  fetch("http://localhost:8000/products/", {
    method: "POST",
    credentials: "include", // 关键：跨域请求携带Cookie
    body: JSON.stringify({
      data: 1,
      info: "No",
    }),
    headers: {
      "Content-Type": "application/json",
      "X-CSRFToken": csrfToken,
    },
  })
  .then((response) => {
    console.log(response);
    return response.text();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));
};

3. 恢复视图的CSRF保护 #

移除@csrf_exempt装饰器，确保视图受CSRF验证：

from django.http import HttpResponse
import json

# Create your views here.
def Product(request):
    if request.method == "POST":
        try:
            data = json.loads(request.body)
            if "data" in data:
                response_data = str(data["data"])
                return HttpResponse(response_data, content_type="text/plain")
            else:
                return HttpResponse(
                    "Invalid JSON data. 'data' key is missing.", status=400
                )
        except json.JSONDecodeError:
            return HttpResponse("Invalid JSON data.", status=400)
    else:
        return HttpResponse("This API only accepts POST requests.")

验证步骤 #

• 打开浏览器开发者工具，在Application标签确认csrftoken Cookie存在
• 在Network标签查看POST请求头，确认X-CSRFToken值与Cookie一致，且Origin在信任列表中

内容的提问来源于stack exchange，提问作者Gourav Singh Rawat