使用React和axios禁止（未設置CSRF cookie）

Question

我一直在React中使用一個登錄組件，該組件可以將用戶名和密碼信息發送到django主機127.0.0.1:8000/api-auth/login/，當我嘗試發送時，django服務器顯示此消息“ Forbidden （未設置CSRF cookie。）：/ api-auth / login /“

我曾嘗試在我的應用程序設置中檢查django cors選項，但沒有任何效果，我也嘗試發送一些標頭以及發布請求。

這是我的cors設定

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
        'http://localhost:3000',        
)
CORS_ALLOW_HEADERS = (
    'csrftoken',
    'content-type',
    'X-CSRFTOKEN'
)
CSRF_COOKIE_NAME = "csrftoken"
CSRF_HEADER_NAME = 'X-CSRFTOKEN'

這是我的要求

handleSubmit = event =>{

     var csrfCookie = Cookies.get('csrftoken'); 
     console.log('csrf cookie: ', csrfCookie); // set to undefined

     axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
     axios.defaults.xsrfCookieName = "csrftoken";
     axios.defaults.withCredentials = true;

     axios
          .post( 'http://127.0.0.1:8000/api-auth/login/', {
                    username : this.state.username,
                    password : this.state.password
                },{
                    headers: {"csrftoken": csrfCookie},
                })
          .then(res => console.log('Results: ' + res))
          .catch(err => console.log('Login error: ' + err))
}

注意 ：我的任何視圖都沒有@csrf_exempt

Answer 1

請在您的設置文件中添加CSRF_COOKIE_SECURE = True