记录：vue+django使用axios进行跨域请求数据

一.跨域问题

从网上了解到，跨域问题实际上是一种浏览器的基础安全设置，因为我们访问网站时，可能会自动带上一些本地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进行了数据处理吧，我还以为得手动在转化下，挺好用得。