Error 403 CSRF cookie not set. axios post request to django server

Question

I have been trying to send a simple post request to my django server using axios package in react. But everytime, I'm getting a backend error saying CSRF Cookie not set. Here is my React Code:

componentDidMount() {
    let csrfToken = getCsrfToken()
    console.log(csrfToken)
    axios({
        method: "POST",
        url: 'http://localhost:8000/getStats',
        headers: {
            "Content-Type": "application/json",
            "x-csrftoken": csrfToken
        },
        data: { "city": "pune" }
    }).then(response => {
        console.log(response);
    }).catch(err => {
        console.log(err);
    })
}

This is added in my django server: CSRF_COOKIE_NAME = "x-csrftoken"

Edit: I haven't yet used any form. I was just trying to send static data as Pune using axios when my component mounted.

Try allowing credentials - https://stackoverflow.com/a/54734106/113962 — Alasdair, Jul 07 '20 at 13:18

score 0 · Answer 1 · answered Jul 07 '20 at 13:21

0

add the csrftoken to the data, I had the same problem with ajax, and Jquery

  [...]
  method: "POST",
        url: 'http://localhost:8000/getStats',
        headers: {
            "Content-Type": "application/json",
        },
        data: { "city": "pune" ,
                "csrfmiddlewaretoken": csrfToken}
  [...]

answered Jul 07 '20 at 13:21

ThunderHorn

1,975
1
20
42

@AtharvaChavan did you try with the keyword "x-csrftoken" – ThunderHorn Jul 07 '20 at 13:26
do you have the value stored in csrfToken? – ThunderHorn Jul 07 '20 at 13:28
const getCsrfToken = () => { const csrf = document.cookie.match('(^|;)\\s*csrftoken\\s*=\\s*([^;]+)'); return csrf ? csrf.pop() : ''; }; is what I'm using to get the csrfToken value. – Atharva Chavan Jul 07 '20 at 13:32
@AtharvaChavan does it return a value? – ThunderHorn Jul 07 '20 at 13:36
do you have {% csrf_token %} in your template? – ThunderHorn Jul 07 '20 at 13:37
Yes. I can see it in the console. "ybUHWOAK4uFJGBTLnGyySqxAh8DxwMq3FIbFsfKsXldPiXcYxVfdxdbUbsLfidCM" – Atharva Chavan Jul 07 '20 at 13:38
No I'm not using a form template. Just sending a request through axios. – Atharva Chavan Jul 07 '20 at 13:38

score 0 · Accepted Answer · answered Jul 07 '20 at 14:49

0

In Data Write

data: {
            'csrfmiddlewaretoken': '{{csrf_token}}',
            "city": "pune"
        },

also add {% csrf_token %}

<form>
  anywhere out this {% csrf_token %}
</form>

answered Jul 07 '20 at 14:49

Waqas Devolper

323
2
10

Error 403 CSRF cookie not set. axios post request to django server

2 Answers2