记录:vue+django使用axios进行跨域请求数据
一.跨域问题从网上了解到,跨域问题实际上是一种浏览器的基础安全设置,因为我们访问网站时,可能会自动带上一些本地cookie之类的信息,当用户从一个网站请求另一个网站时(或者是从一个端口/服务请求另一个端口服务时)就会产生跨域问题,总的来说就是不安全,具体可参照csrf漏洞,当你进入一个钓鱼网站,他将你的请求定向到一个正规网站,这样你访问的时候会带上你输入过的cookie,而这个钓鱼网站就可以得..
一.跨域问题
从网上了解到,跨域问题实际上是一种浏览器的基础安全设置,因为我们访问网站时,可能会自动带上一些本地cookie之类的信息,当用户从一个网站请求另一个网站时(或者是从一个端口/服务请求另一个端口服务时)就会产生跨域问题,总的来说就是不安全,具体可参照csrf漏洞,当你进入一个钓鱼网站,他将你的请求定向到一个正规网站,这样你访问的时候会带上你输入过的cookie,而这个钓鱼网站就可以得到你的cookie信息,从而利用你的身份做一些事情。
一般是后端做跨域的事情:
1.pip install django-cors-headers
2.在setting中设置:
INSTALLED_APPS = [ ... 'corsheaders' ... ]
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', //这个设置为中间件的第一条 ]
# 允许所有域名跨域(优先选择) CORS_ORIGIN_ALLOW_ALL = True # 这里可以设置白名单
## 实际上生产环境我一般打包好来做 所以不会有跨域问题
二:vue的axios请求:
this.axios.post('http://localhost:8000/login/', JSON.stringify({'a': ['1', '2'], '1':2}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(res => {
// 成功回调
console.log('成功回调,接收回调信息:')
console.log(res.data, typeof (res.data), res.data['name'])
console.log('-------------------')
}, res => {
// 错误回调
console.log(2)
})
JSON.stringify: 这个返回到django的request.POST是这样的数据:
qs.stringify:这个返回到django的request.POST是这样的数据:
## qs原因是将数据进行a[0]='1'&a[1]='2' 你可以试一下
>>> q = QueryDict('a=1&a=2&a=3') >>> q.items() [('a', '3')]
# 所以一般使用JSON,很少用qs的
用django取值就比较简单了:
object_pass = list(request.POST.items())[0][0] print(type(object_pass)) print(type(json.loads(object_pass)))
# type是因为我想看一下转化效果
## python后端使用json.dumps转化为str,vue通过axios接受会直接变为object可操作的对象,这里可能是axios进行了数据处理吧,我还以为得手动在转化下,挺好用得。
更多推荐
所有评论(0)