• 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

  • 相关阅读:
    完美解决SpringCloud无法上传大文件方法
    完美解决SpringBoot无法上传大文件方法
    完美解决SpringMVC无法上传大文件方法
    完美解决c#.net无法上传大文件方法
    完美解决csharp无法上传大文件方法
    完美解决c#无法上传大文件方法
    完美解决asp.net无法上传大文件方法
    完美解决java无法上传大文件方法
    P47 会话 tf.Session()
    P46 tensorflow的图
  • 原文地址:https://www.cnblogs.com/future-dream/p/11868269.html
Copyright © 2020-2023  润新知