#Vue+Django的第二关:CSRF验证
当看到大大的Forbidden时,知道这是个硬茬.
django为了方式post给网站带来的安全问题,对每次post请求都要求在网页页面设置一个’暗语’,用来验证post请求是否合规.
这对于django自带的模板系统来说是个简单方便的事情.
但对于Vue来说就有点头疼了!
处理方法:
方法1:直接干到中间件!这个简单,直接注释掉就行了!但是这个是非常不可取的.
方法二:操作稍微有点复杂,我们慢慢说
1\接上一篇文章中的 django-cors-headers 配置
#配置settings
CORS_ORIGIN_ALLOW_ALL = True # 允许任何域访问
#新增下列内容:
#指明在跨域访问中，后端是否支持对cookie的操作。
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
2\在vue端的网络请求配置中设置
import axios from "axios"
// import VueAxios from 'vue-axios'
let requests = axios.create({
baseURL:'http://192.168.3.19:8008/backend/',
header:{'Content-Type':"application/x-www-form-urlencoded"},
// 指明在跨域请求时需要凭证
withCredentials: true,
})
export default requests
3\通过 django.middleware.csrf 中的 get_token()方法 手动获取csrf值
#urls.py文件
urlpatterns = [
#构建后的后台路径
# url(r'^index/',views.index),
#获取csrf的路由配置
url(r'^get_csrf_token/',views.get_csrf_token),
# 管理员登录
#url(r'^login/',views.login)
]
#vews.py 文件
def get_csrf_token(request):
print(get_token(request))
return JsonResponse({'csrf_token': get_token(request) or 'NOTPROVIDED'})
4\vue端发送post请求时.先通过get请求服务器 get_csrf_token()方法获取 csrf值,然后将csrf值设置到post请求的header中
get_csrf_token() {
return new Promise(function(resolve) {
// 这里发送一个axios 请求
requests.get("get_csrf_token/")
.then(function(res) {
resolve(res.data.csrf_token)
})
.catch(function() {
console.log("get_csrf_token方法获取crsf错误")
})
})
},
login(csrftoken) {
// 这是一个登陆请求
let _this = this
console.log('crsf值', csrftoken)
requests.post("login/", {
username: this.form.name,
password: this.form.password
},
// headers中添加csrftoken值
{
headers: {
"X-CSRFToken": csrftoken
}
})
.then(function(res) {
// 处理业务的逻辑
})
.catch(function(error) {
//console.log("登录失败")
console.log(error)
})
},
submit() {
// 这里调用promise 方法并调用登录
let _this = this
this.get_csrf_token().then(function(res) {
// 调用login方法
_this.login(res)
}).catch(function() {
console.log('登录方法submit()中,get_crsf_token出现错误')
})
},
5\进击，可以在axios请求的拦截器中添加csrftoken的获取。
这里给自己挖个坑，后续完善！
Original: https://www.cnblogs.com/bdxily/p/14642238.html
Author: 疯人院code
Title: Vue +Django 开发第二关:Post请求中的CSRF验证
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/603662/
转载文章受原作者版权保护。转载请注明原作者出处！