Django, X-CSRFToken неправильно устанавливается в заголовке запроса

В основном, я получил это, чтобы фактически отправить токен csrf на фронтенд и установить его там в разделе cookie на вкладке приложения в окне dev в браузере:

    @method_decorator(ensure_csrf_cookie)
    def get(self, request, format=None):
        return JsonResponse({'csrftoken':get_token(request)})

на стороне реакции: 


useEffect(()=>{
    axios.get('http://127.0.0.1:8000/csrf/').then((res)=>{
      console.log(res.data)
      Cookies.set('csrftoken',res.data.csrftoken)
    })
  },[])

  let handleSubmit = (e) => {
    e.preventDefault();
    axios
      .post("http://127.0.0.1:8000/signup/", signup, {
        withCredentials: true,
        headers: { "X-CSRFToken": Cookies.get("csrftoken") },
      })
      .then((res) => {
        setDisabled(true)
        setIsUp(true)

        setTimeout(()=>{setIsUp(false)
        redirect('/')},3000)
        

      })
      .catch((e) => {
        console.log(e.response.data)
        let err = e.response.data
        setError(err);
      });
  };

на моей локальной машине (на локальных хостах):

я получаю эти значения для соответствия: enter image description here

enter image description here

Как вы можете видеть, оба Cookie и X-CSRFToken совпадают в заголовке запроса, однако, в продакшене:

enter image description here

enter image description here

и самое странное, что в заголовке запроса имя ключа на локальном хосте Cookie, а в продакшене cookie (разница между c и C)

и, конечно же, я получаю ошибку, когда делаю post запрос на рабочем сервере:

<p>CSRF verification failed. Request aborted.</p>
</div>
<div id="info">
<h2>Help</h2>
<p>Reason given for failure:</p>
<pre> CSRF token from the &#x27;X-Csrftoken&#x27; HTTP header incorrect.
</pre>
<p>In general, this can occur when there is a genuine Cross Site Request Forgery, or when
<a href="https://docs.djangoproject.com/en/4.0/ref/csrf/">Django’s

помогите мне понять проблему, и ПОЖАЛУЙСТА помогите мне понять правильный способ получения токена csrf в случае, если он отсутствует на вкладке application в консоли dev в браузере

Я думаю, вы что-то путаете, CSRF всегда присутствует по умолчанию, что означает, что вам не нужно генерировать csrf-token. Для Axios просто используйте его следующим образом:

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
    
axios.post("/url",{
          key: value
      })
     .then(function (response) {
          //your code....
      })
     .catch(function (error) {
          //error handling
     });
Вернуться на верх