CSRF 驗證適用於 Postman 但不適用於 React/Axios

Question

老實說，這對我還沒有弄清楚的自我來說是一個災難性的打擊——到目前為止已經花了 6 個小時......

我有一個從 Django Rest 框架后端運行的 React 應用程序。 對於密碼重置功能，我使用了 Django 的內置視圖（ auth_views.PasswordResetView ）。 我在 React 中有一個表單，它接受 email 並發送發布請求以重置用戶密碼。 我在 postman 中發送數據的方式是：

Url: http://192.168.0.85:8000/reset_password
Body: {'email': 'blabla@bla.com'}
Headers: {'X-CSRFToken': OGH9iUEtGPqntMYifQ5kiin2ufV9tK39tbp9Wmh6tLST0DXCXSkY8mOvyq5AjjnZ}

...它就像一個魅力：直到我嘗試在 React 中使用 axios 復制相同的確切調用：

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.post('http://192.168.0.85:8000/reset_password',{'email': 'blabla@bla.com'},{headers}))

...這會導致來自后端的此消息出現 403 錯誤： WARNING:django.security.csrf:Forbidden (CSRF cookie not set.): /reset_password

我已經花了 6 個小時進行谷歌搜索和試驗，但終生無法弄清楚為什么 Axios 請求與 Postman 請求有任何不同。 這個問題特別令人惱火，因為@csrf_exempt 不適用於 django 內置視圖。

以下是 Postman 中成功請求的標頭：

X-CSRFToken: OGH9iUEtGPqntMYifQ5kiin2ufV9tK39tbp9Wmh6tLST0DXCXSkY8mOvyq5AjjnZ
User-Agent: PostmanRuntime/7.28.0
Accept: */*
Postman-Token: 91cbbfe7-b434-45fc-97ec-7d442c091070
Host: 192.168.0.85:8000
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 33
Cookie: csrftoken=gawXPEZQfN4qC4aKPhiIvK5qpjvkp4WCVFeXt6Ct2JwW9V94xjxmlOwTtuFLfDgs

...以及使用來自 React 的 Axios 的失敗請求：

baseURL: "http://192.168.0.85:8000"
data: "{\"email\":\"blabla@bla.com\"}"
headers:
Accept: "*/*"
Authorization: ""
Content-Type: "application/json"
X-CSRFToken: "udd4yAGCJuTxw95kCdHYwwEQmGwu1bwxqEQjZhI56v1qWY143S4IPCrUSvk9xkV8"
__proto__: Object
maxBodyLength: -1
maxContentLength: -1
method: "post"
timeout: 0
transformRequest: [ƒ]
transformResponse: [ƒ]
url: "/reset_password"
validateStatus: ƒ validateStatus(status)
xsrfCookieName: "csrftoken"
xsrfHeaderName: "X-CSRFToken"
__proto__: Object
isAxiosError: true

Answer 1

這是否回答了您的問題， https://stackoverflow.com/a/66550363/7838574 ？

重點放在settings.py部分。 這就是大約一周前讓我絆倒的原因。

老實說，堅持這一點並尋求幫助真是太好了！ 編程可能會非常令人沮喪，一旦障礙過去，你就會非常有收獲！