版本

  1. Django 2.2.3
  2. Python 3.8.8
  3. djangorestframework 3.13.1
  4. django-cors-headers 3.11.0

django实现跨域

说明:此处方法为后端解决跨越,即django端解决跨越。

1. 安装 django-cors-headers

  1. pip install django-cors-headers

2. 修改项目配置文件 项目/settings.py

  1. ...
  2. # Application definition
  3. INSTALLED_APPS = [
  4. 'django.contrib.staticfiles',
  5. 'corsheaders', # 添加:跨域组件
  6. 'rest_framework', # 添加:DRF框架
  7. 'home', # 子应用
  8. ]
  9. MIDDLEWARE = [
  10. 'corsheaders.middleware.CorsMiddleware', # 添加:放首行(放其他行未测试)
  11. 'django.middleware.security.SecurityMiddleware',
  12. ...
  13. ]
  14. ...
  15. # CORS组的配置信息
  16. CORS_ORIGIN_WHITELIST = (
  17. 'http://127.0.0.1:8080',
  18. # 这里需要注意: 1. 必须添加http://否则报错(https未测试) 2. 此地址就是允许跨域的地址,即前端地址
  19. )
  20. CORS_ALLOW_CREDENTIALS = True # 允许ajax跨域请求时携带cookie
  21. ...

至此django端配置完毕

3. 前端vue使用axios访问后端django提供的数据接口,安装axios

  1. npm install axios -S

4. 前端vue配置axios插件,修改src/main.js

  1. ...
  2. import axios from 'axios'; // 添加: 导入axios包
  3. // axios.defaults.withCredentials = true; // 允许ajax发送请求时附带cookie
  4. Vue.prototype.$axios = axios; // 把对象挂载vue中
  5. ···

5. 在XX.vue中跨域请求数据

  1. ···
  2. created: function() {
  3. // 获取轮播图
  4. this.$axios.get("http://127.0.0.1:8000/book/").then(response => {
  5. console.log(response.data)
  6. this.banner_list = response.data
  7. }).catch(response => {
  8. console.log(response)
  9. })
  10. // http://127.0.0.1:8000/book/ 这个就是后端django接口
  11. ···
点击查看代码
  1. <template>
  2. <div class="div1">
  3. <el-carousel trigger="click" height="600px">
  4. <el-carousel-item v-for="book in book_list" :key="book.index">
  5. <a :href="book.link">
  6. <img width="80%" :src="book.image" alt="">
  7. </a>
  8. </el-carousel-item>
  9. </el-carousel>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. name:"Book",
  15. data(){
  16. return {
  17. book_list:[]
  18. };
  19. },
  20. created: function() {
  21. // 获取轮播图
  22. this.$axios.get("http://127.0.0.1:8000/book/").then(response => {
  23. console.log(response.data)
  24. this.book_list = response.data
  25. }).catch(response => {
  26. console.log(response)
  27. })
  28. }
  29. }
  30. </script>
  31. <style>
  32. .div1 {
  33. margin-top: 100px;
  34. height: 1000px
  35. }
  36. img {
  37. width: auto;
  38. height: auto;
  39. max-width: 100%;
  40. max-height: 100%;
  41. }
  42. </style>

django+vue实现跨域的更多相关文章

  1. django 前端请求跨域问题解决

    django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...

  2. Django框架 之 跨域请求伪造

    Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...

  3. 跨域问题和django中实现跨域

    跨域问题 1.同源策略(浏览器的安全功能): 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同 2.CORS跨域资源共享 实现CORS通信的关键是服务器,只要服务器实 ...

  4. django 12天(跨域,文件上传,下载,cookie,session)

    django 12天(跨域,文件上传,下载) 跨域 什么是跨域 1.协议不同 2.端口不同 3.主机不同 如何解决跨域 1.安装django-cors-headers模块 2.在settings.py ...

  5. vue解决跨域问题

    vue解决跨域问题 vue跨域解决方法和小总结 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow ...

  6. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  7. django中解决跨域问题

    -跨域问题 -浏览器的:同源策略,浏览器拒绝不是当前域域返回的数据 -ip地址和端口号都相同才是同一个域 -如何解决: -CORS:跨域资源共享 -简单请求:发一次请求 -非简单请求:非简单请求是发送 ...

  8. 在django中解决跨域AJAX

    由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接收罢了. 浏览器同源 ...

  9. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

随机推荐

  1. selenium - 弹出框死活定位不到

    先要确定是不是alert,是才能用,不是的话肯定不能用. 有些弹出框是div层,这种跟平常定位方法一样 有些弹出框是嵌套的iframe层,这种切换iframe就可以了 有些弹出框比较坑,是嵌入的一个窗 ...

  2. Qt之锁

    mythread.h: #ifndef MYTHREAD_H #define MYTHREAD_H #include <QObject> #include<QMutex> cl ...

  3. golang中字符串、数值、2进制、8进制、16进制、10进制、日期和字符串之间的转换

    package main import ( "fmt" "reflect" "strconv" "time" ) fun ...

  4. [luoguP4139]上帝与集合的正确用法

    \(\text{Description}\) \(\text{Given a number }p(p\leqslant10^7).\) \(\text{Output }2^{2^{2^{2^{\cdo ...

  5. Hello,find!

    Hello,find! 前言 余幼时,每至除夕,爆竹声声,如雷贯耳,醒于梦中,便知春节将至.与兄长二三人,执摔炮六七只, 玩耍于廷中.出门罢,廷中白雪覆于黄土之上.二三尺之外,见犬窝,余之爱犬趴于其中 ...

  6. HTML 基础2

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化.有以下三种方式来插入样式表: 外部样式表 内部样式 内联样式 外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使 ...

  7. Intellig Idea 常用快捷键列表

    修改方法如下: 点击 文件菜单(File) –> 点击 设置(Settings- Ctrl+Alt+S), –> 打开设置对话框. 在左侧的导航框中点击 KeyMap. 接着在右边的树型框 ...

  8. 谷歌CEO桑达尔·皮查伊:区块链可能撼动云计算

    谷歌CEO桑达尔·皮查伊在周二的季度收益电话会议上承认了Web3和区块链的力量. 皮查伊表示,Web3描述了基于区块链的互联网新愿景,区块链是一种分散.安全.透明的技术,支持加密货币网络.不可替代代币 ...

  9. Lesson2——NumPy Ndarray 对象

    NumPy 教程目录 NumPy Ndarray 对象 NumPy 最重要的一个特点是其 $N$ 维数组对象 ndarray,它是一系列同类型数据的集合,以 $0$ 下标为开始进行集合中元素的索引. ...

  10. CentOS7安装部署Prometheus+Grafana (转)

    转自:https://www.jianshu.com/p/967cb76cd5ca 作为监控系统的后起之秀,prometheus的安装可谓非常简单,不需要第三方的依赖(数据库.缓存.PHP之类的).下 ...