如何使用 Axios 將 CSRF Coo​​kie 從 React 發送到 Django Rest Framework

Question

我想從使用Axios的React應用程序向Django Rest Framework后端發出POST請求。 我設法從后端獲取了CSRF 令牌，但我無法通過我的請求發送它，所以我總是收到Forbidden (CSRF cookie not set.)錯誤：

這是我的React應用程序的代碼：

handleClick() {
    const axios = require('axios');
    var csrfCookie = Cookies.get('XSRF-TOKEN');
    console.log(csrfCookie)
    axios.post('http://127.0.0.1:8000/es/api-auth/login/',
      {
        next: '/',
        username: 'admin@admin.com',
        password: 'Cancun10!',
      },
      {
        headers: {
          'x-xsrf-token': csrfCookie,  // <------- Is this the right way to send the cookie?
        },
        withCredentials = true,
      }
    )
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
  }

這是我的settings.py CSRF 配置：

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = (
    'xsrfheadername',
    'xsrfcookiename',
    'content-type',
    'XSRF-TOKEN',
)

CORS_ORIGIN_WHITELIST = serverconfig.CORS_ORIGIN_WHITELIST
CSRF_TRUSTED_ORIGINS = serverconfig.CSRF_TRUSTED_ORIGINS
CSRF_COOKIE_NAME = "XSRF-TOKEN"

Answer 1

Django默認使用X-CSRFTOKEN作為csrf標頭，請參見此處 。 選項CSRF_COOKIE_NAME你在你的Django設置使用只更改cookie的名稱，而默認情況下csrftoken ，看這里 。

要解決您的問題，請在axios調用中使用以下標頭： headers: { 'X-CSRFTOKEN': csrfCookie } 。

使用以下內容：

axios.post('http://127.0.0.1:8000/es/api-auth/login/',
    {
        next: '/',
        username: 'admin@admin.com',
        password: 'Cancun10!',
    },
    {
        headers: {
             'X-CSRFTOKEN': csrfCookie,
         },
    },
)

另外，從Django設置中的CORS_ALLOW_HEADERS中刪除XSRF-TOKEN ，然后向其中添加X-CSRFTOKEN 。 如果你不喜歡刪除XSRF-TOKEN ，你可以安全地添加X-CSRFTOKEN到CORS_ALLOW_HEADERS與以下，文檔在這里

# settings.py

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'X-CSRFTOKEN',
]

Answer 2

此外，如果您創建一個 Axios 實例會更容易

const instance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  xsrfHeaderName: 'X-CSRFToken',
  xsrfCookieName: 'csrftoken',
})

並確保xsrfCookieName和CSRF_COOKIE_NAME具有相同的名稱。 請注意，如果CSRF_COOKIE_HTTPONLY設置為 True，客戶端 JavaScript 將無法訪問 CSRF cookie：

# settings.py

CSRF_COOKIE_NAME = "csrftoken"
CSRF_COOKIE_HTTPONLY = False

CORS_EXPOSE_HEADERS = ["Content-Type", "X-CSRFToken"]
CORS_ALLOW_CREDENTIALS = True