我正在使用react js中的axios post字符串发送csrf令牌，但csrf令牌验证失败。我也完成了with credentials:true但它不起作用。我收到cookie中的csrf令牌，但无法发送。
class LoginService extends Component {
loginUser(formData)
{
const config = {
headers: { 'content-type': 'application/json',
'X-CSRFToken': Cookies.get("csrftoken")}
}
return axios.post(`${API_BASE_URL}api/user/v1/account/login_session/`,formData,config);
}
}
如果您使用的是httpsOnly cookie，则'X-CSRFToken': Cookies.get("csrftoken")}将不起作用。
什么是HttpOnly
根据微软开发者网络，HttpOnly是Set Cookie HTTP响应中包含的附加标志头球在生成cookie时使用HttpOnly标志有助于降低客户端脚本访问受保护cookie的风险(如果浏览器支持(。
使用withCredentials: true就足够了。
loginUser(formData)
{
const config = {
headers: { 'content-type': 'application/json' },
withCredentials: true
}
return axios.post(`${API_BASE_URL}api/user/v1/account/login_session/`,formData,config);
}
}
withCredentials指示是否进行跨站点访问控制请求应该使用凭据
withCredentials:false，//默认
当然，您还需要确保cookie域设置正确，以便cookie正常工作。
提示：检查您的chrome网络检查器，查看欲望cookie是否与您的请求一起发送
带HttpOnly的CSRF
如果使用httpOnly设置csrf cookie，则可以删除httpOnly。
这里有一个答案https://security.stackexchange.com/a/175540/135413
当您在Axios中将标头发送到服务器时，您需要知道服务器端是否接受模式：CSRF-TOKEN、X-CSRF-TOKEN、XSRF-TOKEN或X-XSRF-TOKEN。
您使用的是X-CSRFToken，它不与上面显示的任何模式组合。
更多信息：https://www.npmjs.com/package/csurf
**这就是我解决问题的方法：首先将这两个设置为：-axios.defaults.xsrfCookieName="；csrftoken"；；axios.defaults.xsrfHeaderName="；X-CSRFTOKEN"；；**
loginUser(formData)
{
const config = {
headers: { 'content-type': 'application/json'},
"X-CSRFToken": Cookies.get('csrftoken'),
withCredentials: true
}
return axios.post(`${API_BASE_URL}api/user/v1/account/login_session/`,formData,config);
}
}