Django CSRF 和 axios 發布 403 Forbidden

Question

我使用 Django 和石墨烯作為后端，使用 Nuxt 作為前端。 當我嘗試將請求從 nuxt 發布到 django 時出現問題。 在郵遞員中一切正常，在 nuxt 中我收到 403 錯誤。

姜戈

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

某事

這是來自 axios 帖子的請求標頭。 對我來說奇怪的是 cookie 的值錯誤。 令牌的良好價值存在於 X-CSRFToken 標頭中。

這是來自 axios post 請求的日志。 對我來說另一個奇怪的事情是未定義的標頭：Content-Type 和 X-CSRFToken

謝謝！

Answer 1

我解決了這個問題，我想在這里分享解決方案。

cookie 值錯誤的問題是由管理（我不記得如何）從后端應用程序獲取 csrf cookie 的前端應用程序生成的。 在X-CSRFToken標頭中，令牌是從響應的Set-cookie標頭接收的，在Cookie標頭中是來自后端應用程序的 cookie。

在我用127.0.0.1更改localhost並在 axios 插件中添加config.xsrfCookieName = 'csrftoken' ，我能夠分離應用程序，獨立保存和使用 cookie。

第二個問題，未定義的頭是由 axios 生成的。 這兩行代碼解決了這個問題。 這些也在 axios onRequest 方法中添加。

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