Django CSRF and axios post 403 Forbidden

Question

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.

Django

# url.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', GraphQLView.as_view(graphiql=settings.DEBUG,
                                     schema=schema)),
]

# settings.py

CORS_ORIGIN_WHITELIST = 'http://localhost:3000'
CORS_ALLOW_CREDENTIALS = True
CSRF_USE_SESIONS = False
CSRF_COOKIE_HTTPONLY = False
CSRF_COOKIE_SAMESITE = None

NuxtJs

# nuxt.config.js

axios: {
  baseURL: 'http://127.0.0.1:8000/',
  debug: false,
  progress: true,
  credentials: true
},

# plugins/axios.js

await $axios.onRequest((config) => {
    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)

# 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
    })
  }
}

# queries/contact.js

export const AddMessage = {
  query: `
    mutation AddContact($input: AddMessageInput!){
      addMessage(input: $input){
        message{
        name
        email
        body
        terms
        }
      }
    }
  `,
  variables: `
  {
    "input":{
      "name": "test",
      "email": "[email protected]",
      "body": "test",
      "terms": true,
    }
  }
  `,
  operationName: 'AddMessage'
}

Somethig that

Here 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.

Here is the log from axios post request. Another strange thing for me is the undefined headers: Content-Type and X-CSRFToken

Thank you!

Try removing 'django.middleware.csrf.CsrfViewMiddleware', from the middleware in settings.py. Although this should only be done in the development environment. — GTBebbo
Will the nuxt application be running on a different domain/subdomain? If so, then you can't use CSRF for that API. — schillingt

Ionut Ionut · Accepted Answer · 2020-03-24T11:51:51

I resolved this problem and I want to share the solution here.

The problem with wrong cookie value was generated by the front end app that managed (I don't remember how) to get csrf cookie from the back end app. In X-CSRFToken header was token received from response's Set-cookie header and in Cookie header was the cookie from back end app.

After I changed localhost with 127.0.0.1 and added config.xsrfCookieName = 'csrftoken' in axios plugin I was able to separate the apps, save and use cookies independent.

The second problem, with undefined headers was generated by axios. These 2 line of code resolved the problem. These were added also in axios onRequest method.

config.xsrfHeaderName = 'X-CSRFToken'
config.headers['Content-Type'] = 'application/json'

Django CSRF and axios post 403 Forbidden

1 Answers