vue.js Django CSRF验证失败,尽管令牌正确

yh2wf1be  于 2023-03-19  发布在  Vue.js
关注(0)|答案(1)|浏览(169)

我在Django中验证CSRF时遇到了问题,尽管我在POST请求中包含了正确的CSRF令牌,并遵循了Django文档中推荐的所有步骤,但我还是不断收到“CSRF丢失”的错误。
以下是我的Axios和Django配置。

const service = axios.create({
  baseURL,
  timeout: 4000,
  withCredentials: true,
  xsrfCookieName: 'csrftoken',
  xsrfHeaderName: 'X-CSRFToken',
});

...

headers: {
      'X-CSRFToken': Cookies.get('csrftoken'),
    },
# settings.py
CSRF_COOKIE_NAME = 'csrftoken'
CSRF_HEADER_NAME = 'X-CSRFToken'

CSRF_TRUSTED_ORIGINS = [
    'http:127.0.0.1:5173'
]

CORS_ALLOW_CREDENTIALS = True

@ensure_csrf_cookie
def get_csrf_token(request):
    request.META["CSRF_COOKIE_USED"] = True
    return JsonResponse({'msg': 'now csrftoken has been set in ur Cookies'})

当我发送POST请求时,请求头已经包含了所需的X-CSRFTokenCookie ',但我仍然收到403响应。
以下是我目前所做的尝试:

  • 确保CSRF令牌作为X-CSRFToken标头
  • 检查我的浏览器是否阻止第三方Cookie
  • 在Django设置中更改CSRF cookie名称

这些解决方案对我都不起作用。有人对如何解决这个问题有任何其他建议或想法吗?

0pizxfdo

0pizxfdo1#

您可以按如下方式获取令牌:
首先使用以下代码创建csrf_token.js文件:

function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== "") {
    const cookies = document.cookie.split(";");
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) === name + "=") {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
const CSRF_TOKEN = getCookie("csrftoken");

export { CSRF_TOKEN };

然后在您的axios配置文件中导入CSRF_TOKEN并像这样使用它。

import { CSRF_TOKEN } from "path_where_file_is/csrf_token.js";

const service =  axios.create({
  baseURL: "https://example.com",
  headers: {
    "Content-type": "application/json",
    "X-CSRFTOKEN": CSRF_TOKEN,
  },
});

查看Django官方文档如何使用Django的CSRF保护. click here

相关问题