React表单提交POST请求时CSRF令牌配置问题求助

1. 配置Django可信源 #

错误核心是React应用的域名不在Django的可信列表中，需修改项目settings.py：

• 更新ALLOWED_HOSTS，添加域名的主机部分：

  ALLOWED_HOSTS = [
      # 保留原有配置，新增以下内容
      'apjackson20-code50-112112529-76x5j94r47x2pgxr-8000.preview.app.github.dev',
  ]
  

• 添加CSRF_TRUSTED_ORIGINS，带上完整的HTTPS协议和域名：

  CSRF_TRUSTED_ORIGINS = [
      'https://apjackson20-code50-112112529-76x5j94r47x2pgxr-8000.preview.app.github.dev',
  ]
  

修改后重启Django服务，让配置生效。

2. 正确在React中携带CSRF Token #

确保fetch请求正确获取Token并携带认证信息：

• 编写获取CSRF Token的函数：

  function getCsrfToken() {
    let token = null;
    const cookies = document.cookie.split(';');
    for (const cookie of cookies) {
      const trimmedCookie = cookie.trim();
      if (trimmedCookie.startsWith('csrftoken=')) {
        token = decodeURIComponent(trimmedCookie.slice(10));
        break;
      }
    }
    return token;
  }
  

• 发送POST请求时，设置请求头和凭证：

  const handleFormSubmit = async (formText) => {
    const csrfToken = getCsrfToken();
    try {
      const res = await fetch('/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrfToken,
        },
        credentials: 'include', // 跨域请求必须开启，才能携带Cookie
        body: JSON.stringify({ text: formText }),
      });
      
      if (!res.ok) throw new Error('提交失败');
      const data = await res.json();
      // 处理返回结果
    } catch (err) {
      console.error(err);
    }
  };
  

3. 关键配置检查 #

• 确保Django的CSRF_COOKIE_HTTPONLY设为False，否则前端无法通过document.cookie获取Token：

  CSRF_COOKIE_HTTPONLY = False
  

• 因为React应用使用HTTPS，需开启CSRF_COOKIE_SECURE：

  CSRF_COOKIE_SECURE = True
  

内容的提问来源于stack exchange，提问作者Anthony Jackson