禁止（未设置 CSRF cookie。）与 React 和 axios

Question

我一直在使用 React 中的登录组件，它可以将用户名和密码信息发送到 django 主机 127.0.0.1:8000/api-auth/login/，当我尝试发送它时，django 服务器显示此消息“禁止（未设置 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到您的设置文件中