Django实战004:跨域请求问题解决

现在比较留下前后端分离模式开发，这样可以统一API接口，可以大量复用接口，提升效率同时也可以适用于多种平台使用，比如WEB、IOS、安卓、pc、小程序等等。这里我前端用的是vue开发，后台则是django开发，而两个服务一开数据请求就存在跨域问题，所以今天我们来解决跨域问题。

跨域的解决方法很多，这里我们直接用django提供的方法来实现，django提供了一个专门处理跨域问题的插件：django-cors-headers ，我们只要安装该插件并在项目中配置即可解决跨域问题，安装命令：pip install django-cors-headers --save（这里我已经安装了，就不再重复了）。

 接下来在项目中进行配置，首先我们先要将该插件引入项目中，在settings.py中找到INSTALLED_APPS列表，添加‘corsheaders’，用Pycharm会有提示的。

 新增中间件（中间件是Django请求/响应处理的钩子框架，用来改变Django的输入或输出，要激活中间件组件，就把对应的组件添加到settings.py中的MIDDLEWARE_CLASSES列表中），注意'corsheaders.middleware.CorsMiddleware'中间件注册时必须放在django.middleware.common.CommonMiddleware中间件的前面。

注册完组件之后我们就可以来配置跨域设置了， 直接在后面新增配置信息，我放在了TIME_ZONE = 'Asia/Shanghai'后面，配置信息我进行了注释，应该看得懂了，看自几需求来定义吧，下图是我的配置，因为是学习用的，所以我直接定义允许所有了。

CORS_ALLOW_CREDENTIALS = True //允许Cookie包含在跨站点HTTP请求中，默认为false
CORS_ORIGIN_ALLOW_ALL = True//允许所有的访问，白名单不会被使用，默认为false
CORS_ORIGIN_WHITELIST = (  //配置白名单
    '*'
)
CORS_ALLOW_METHODS = ( //允许访问的方法
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)
CORS_ALLOW_HEADERS = ( //允许的header
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requestd-with',
)

接下来我们来尝试访问下后台，这里我写了一个简单的登录页面，用axios来进行数据请求操作，因为是登录所以需要对数据进行验证，这里我用post方式进行数据请求，如果你是获取页面之类的可以使用get方法,这里我把get和post方式都写出来了。

 有了前台我们现在需要给后台写个视图来接受前端的数据请求，并对数据进行校正，这里我写了一个比较简单的操作，主要是验证我们是否能正常获取到前端发送过来的数据，然后给个指定的值进行匹配，成功则给前端返回200，失败则400.

现在我们可以在前端输入用户名密码验证下我们的操作了，打开浏览器调试（F12 ），查看Console中的数据返回情况，当我们输入正确的用户和密码时则接受到200，否则400。

遇到的问题

    刚才的操作出现了点小问题，那就是后台没有成功的接收到前台发送过来的数据，然后我用postman模拟了下post的请求可以正常的返回数据，那就说明前台发送的数据存在问题，查了下原因：axios请求时，没有设置Content-Type，默认是text/plain，这时服务器不知道如何去解析数据。

 解决方案

      引入 qs ，直接在main.js中引入该组件（安装axios就包含了，无需再安装），然后全局注册下组件 （方法和祖册axios一样），接着修改下axios传参方式，用this.$qs.stringify(）来传参数即可。

import qs from 'qs';
Vue.prototype.$qs = qs;