vue+django分离开发的思想和跨域问题的解决

一、介绍

在前后端分离的开发过程中，会涉及到跨域的问题，比如本次个人使用的Django+vue的框架，在vue对Django进行响应，Django再将响应的数据返回给vue，vue在进行渲染，如果不设置跨域，数据就不能双向绑定，会出现错误。

二、前后端响应的基本原理

在vue中给定一个method（get/method/...）去响应后端的地址，后端在给一个反馈。交互的重点就是vue响应后端的设定好的url，比如我在Django中设置了一个url：

这个是project中的url

这个是APP中的url

两个连在一起就是url。

而我在vue中也需要这样去请求，才可以将前后端连接起来。

三、跨域

通过前面连接的基本介绍，就可以知道我在vue中的地址是http://localhost:8080/，而我在Django中的配置是http://localhost:8000/，两个不同域就会出现错误。解决的办法

在vue/config的ProxyTable中设置解决域冲突的问题

1、在config/index.js的文件下面修改参数

代码如下：

除了代理的target需要更改以外，其他的不需要更改，我尝试了下，可能是初学的原因，感觉这个api是写死了的，换了其他的好像有问题

    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8000/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        // secure: false,  // 如果是https接口，需要配置这个参数
        pathRewrite: {
          '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },    

 2、ajax的请求

1.安装

在项目下面安装axios

使用指令

npm install axios

2.使用

2.1在main.js中导入

import axios from 'axios'

Vue.prototype.$http = axios

2.2在.vue函数中的调用
使用created()方法对后端进行响应

响应地址前面带上api+自己设定的路由，就可以完成跨域的json访问。

四、结果

Django中的代码

从django.http中导入JsonResponse

界面展示

五、总结

跨域问题的解决很重要，尤其是前后端分离的情况下。主要的问题是跨域的配置，按照我这样的配置，在按照给出的请求方式就可以成功，在后面的学习中会不断的完善，最后的结果也会放到github。

六、参考

这个人blog前端的请求书写给我提供了解决的方案：

https://www.cnblogs.com/now-future/articles/9887504.html

这是一些写的好的

https://segmentfault.com/a/1190000011007043

https://juejin.im/post/5d89c75651882509662c55b1