axios异步请求如何设置通过django的csrf验证

问题描述：

最近在使用vue全家桶开发前端，后端框架是django，我在使用axios做前端异步请求时，除了get之外的请求方法django都会返回403状态码，表单总是提交不上去。

分析原因：

通过chrome浏览器的network中，

了解到是csrf的认证没有通过，所以被拒绝提交。

我之前对csrf攻击和防范的原理不太了解，在axios的异步请求配置里也没有做特别的处理，所以请求被django拒绝了。

我首先具体查看了csrf攻击和防范的原理，了解了csrf攻击的原理和主要的三种防护手段，详见这篇博客，写的很详细

.............................................................................................................................................................................................................

解决方案：

django会在浏览器的cookie里面保存一项csrftoken=GvzB3ilhlgadishmascacsilreclherlkjhaklsdv3qx4M96XRG88omScDPQaKoMxJ;

这个是从django生成的，django会检查每个http请求的headers 里面的 X-CSRFToken 项的值是否和cookie里面保存的值相同，如果不相同或者缺失，就拒绝这个请求，如果相同，说明这次请求是从真实用户发起的。

所以要做的就是在每次请求的 headers 里面加上X-CSRFToken：csrftoken值

axios的配置代码如下：

import axios from 'axios'
// 拦截request,设置全局请求为ajax请求
axios.interceptors.request.use((config) => {
  config.headers['X-Requested-With'] = 'XMLHttpRequest';
  let regex = /.*csrftoken=([^;.]*).*$/; // 用于从cookie中匹配 csrftoken值
  config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
  return config
});

其中 /.*csrftoken=([^;.]*).*$/ 是一个正则表达式，用于从cookie中获取csrftoken的值，([^;.]*) 是命名捕获，表示从匹配到的内容中只获得 ()内的值。

string.match(regex) 得到的是一个数组，第0项是匹配到的全部内容，第1项是通过命名捕获得到的内容，在这里就是csrftoken的值。

这样就完成了使用axios发送请求的正确配置了，同时保证了网站免受csrf攻击的影响

axios异步请求如何设置通过django的csrf验证

猜你喜欢