Django CSRF 和 axios 发布 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": "test@test.com",
      "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!

Answer 1

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'