title: Django CSRF and axios post 403 Forbidden
body: <p>I use Django with graphene for back-end and Nuxt for front-end. The problem appears when I try post requests from nuxt to django. In postman everything works great, in nuxt I receive a 403 error.</p>
  
  <p><strong>Django</strong></p>
  
  <pre><code># url.py
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/', GraphQLView.as_view(graphiql=settings.DEBUG,
                                       schema=schema)),
  ]
  </code></pre>
  
  <pre><code># settings.py
  
  CORS_ORIGIN_WHITELIST = 'http://localhost:3000'
  CORS_ALLOW_CREDENTIALS = True
  CSRF_USE_SESIONS = False
  CSRF_COOKIE_HTTPONLY = False
  CSRF_COOKIE_SAMESITE = None
  </code></pre>
  
  <p><strong>NuxtJs</strong></p>
  
  <pre><code># nuxt.config.js
  
  axios: {
    baseURL: 'http://127.0.0.1:8000/',
    debug: false,
    progress: true,
    credentials: true
  },
  </code></pre>
  
  <pre><code># plugins/axios.js
  
  await $axios.onRequest((config) =&gt; {
      config.headers.common['Content-Type'] = 'application/json'
      config.xsrfCookieName = 'csrftoken'
      config.xsrfHeaderName = 'X-CSRFToken'
      const csrfCookie = app.$cookies.get('csrftoken')
      config.headers.common['X-CSRFToken'] = csrfCookie
      console.log(config)
  </code></pre>
  
  <pre><code># store/contact.js
  
  import { AddMessage } from '../queries/contact.js'
  
  export const actions = {
    async send() {
      const message = await this.$axios({
        url: 'api/',
        method: 'POST',
        data: AddMessage
      })
    }
  }
  
  </code></pre>
  
  <pre><code># queries/contact.js
  
  export const AddMessage = {
    query: `
      mutation AddContact($input: AddMessageInput!){
        addMessage(input: $input){
          message{
          name
          email
          body
          terms
          }
        }
      }
    `,
    variables: `
    {
      "input":{
        "name": "test",
        "email": "test@test.com",
        "body": "test",
        "terms": true,
      }
    }
    `,
    operationName: 'AddMessage'
  }
  </code></pre>
  
  <p>Somethig that </p>
  
  <p><a href="https://i.stack.imgur.com/DceN3.png" rel="nofollow noreferrer">Here</a> are request headers from axios post. Something strange for me is the cookie with a wrong value. The good value of token is present in X-CSRFToken header.</p>
  
  <p><a href="https://i.stack.imgur.com/9XKWN.png" rel="nofollow noreferrer">Here</a> is the log from axios post request. Another strange thing for me is the undefined headers: Content-Type and X-CSRFToken</p>
  
  <p>Thank you!</p>