使用Django Allauth Headless重置密码时遇401 Unauthorized问题求助

问题 #

在Vue.js前端基于Django Allauth Headless实现密码重置流程时，调用端点/_allauth/browser/v1/auth/password/reset的POST请求返回401 Unauthorized（文档定义为"401 - Unauthorized - Initial"），但已传递Cookie、CSRF令牌和邮件重置key。

当前流程：发送重置邮件的接口调用正常，邮件可成功发送至目标邮箱，包含前端处理重置的链接。点击链接后调用重置接口的POST请求触发错误，但相同端点的GET请求可正常执行。

已在请求头中携带Cookie和CSRF令牌，想咨询除CSRF和key外还需补充何种授权？希望继续使用Django Allauth完成流程，而非切换至普通Django Auth。

相关代码 #

发送重置邮件函数

async function sendEmailReset() {
  spin.value = true;
  try {
    const resp = await api.get("/api/email-reset/" + email.value);

    if (resp.data.status == "none") {
      error_message.value =
        "Este e-mail não existe no sistema. Faça o processo de registro novamente.";
      wrongCredentials.value = true;
      return;
    } else if (resp.data.status == "social") {
      error_message.value =
        "Este email foi cadastrado com uma conta social. Faça login com o Google.";
      wrongCredentials.value = true;
      return;
    } else {
      const response = await api.post(
        "/_allauth/" + authClient + "/v1/auth/password/request",
        { email: email.value },
        {
          headers: { "Content-Type": "application/json" },
        }
      );
      console.log(response);
      if (response.data.status == 200) {
        sentEmail.value = true;
      } else {
        error_message.value =
          "Ocorreu um erro ao enviar o e-mail. Verifique se o e-mail está correto.";
        wrongCredentials.value = true;
      }
    }
  } catch (error) {
    console.error(error);
    error_message.value =
      error.response?.data.detail ||
      "Ocorreu um erro na conexão com o servidor. Se persistir, tente novamente mais tarde.";
    wrongCredentials.value = true;
  } finally {
    spin.value = false;
    email.value = "";
  }
}

重置密码函数

const reset = async () => {
  if (password.value !== password2.value) {
    error_message.value = "As senhas não coincidem.";
    wrongCredentials.value = true;
    return;
  }
  if (password.value.length < 8) {
    error_message.value = "A senha deve ter pelo menos 8 caracteres.";
    wrongCredentials.value = true;
    return;
  }
  spin.value = true;
  try {
    console.log(p1.value);
    console.log(password.value);
    const response = await api.post(
      "/_allauth/" + authClient + "/v1/auth/password/reset",
      {
        key: p1.value,
        password: password.value,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
    // 后续逻辑省略
  } catch (error) {
    console.error(error.response.data);
    // 返回的错误信息：
    // {
    //   "status": 401,
    //   "data": {
    //     "flows": [
    //       { "id": "login" },
    //       { "id": "signup" },
    //       { "id": "provider_redirect", "providers": ["google"] },
    //       { "id": "provider_token", "providers": ["google"] }
    //     ]
    //   },
    //   "meta": { "is_authenticated": false }
    // }
  } finally {
    spin.value = false;
  }
};

解决方案 #

针对Django Allauth Headless的密码重置POST接口401问题，可从以下几个方向排查修复：

• 确认重置key的传递格式
  检查p1.value是否是邮件链接中完整的重置凭证：部分场景下Allauth的重置链接包含uidb64和token两个参数，需要将两者按要求拼接成key，而非只截取单一字段。

• 确保请求携带正确会话Cookie
  确认请求工具（如Axios）开启了withCredentials: true，否则Cookie无法自动传递到后端。如果是自定义封装的api实例，需确保POST请求也启用该配置。

• 检查CSRF令牌的正确传递
  除了在请求头中携带X-CSRFToken，需确保令牌是从当前会话的csrftoken Cookie中提取的。可通过请求拦截器自动注入：

  axios.interceptors.request.use(config => {
    const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1];
    if (csrfToken) config.headers['X-CSRFToken'] = csrfToken;
    return config;
  });
  

• 验证后端Allauth配置

  • 确保ACCOUNT_EMAIL_CONFIRMATION_HMAC = True（默认开启），否则重置token验证会失败；
  • 检查ACCOUNT_PASSWORD_RESET_TIMEOUT_DAYS，确认重置key未过期；
  • 确认CORS配置允许前端域名携带Cookie：CORS_ALLOW_CREDENTIALS = True，且CORS_ALLOWED_ORIGINS包含前端域名。

• 核对请求参数字段名
  部分版本的Allauth Headless中，密码重置POST接口需要uid和token两个参数而非单一key，可尝试修改请求体：

  {
    uid: '邮件链接中的uidb64值',
    token: '邮件链接中的token值',
    password: password.value
  }
  

  具体以你使用的Allauth Headless版本文档为准。

内容的提问来源于stack exchange，提问作者Matt Duarte