django 跨域请求,Django+vue
在我们的项目中需要用到框架实现跨域的问题，本文通过示例代码给大家详细介绍django vue实现跨域的方法，感兴趣的朋友跟随小编一起看看吧
目录
版本框架实现跨域1.安装姜戈-科尔什-黑德库2.修改项目配置文件项目/setting . py3 .前端某视频剪辑软件使用爱可信访问后端框架提供的数据接口，安装axios4 .前端某视频剪辑软件配置爱可信插件，修改src/main.js5 .在XX.vue中跨域请求数据
版本
姜戈
Python 3.8.8
djangorestframework
django-cors-headers 3.11.0
django实现跨域
说明：此处方法为后端解决跨越，即框架端解决跨越。
1. 安装 django-cors-headers 库
点安装姜戈-科尔什-黑德
2. 修改项目配置文件 项目/settings.py
.
#应用程序定义
INSTALLED_APPS=[
django.contrib.staticfiles ，
科尔海德斯，#添加：跨域组件
rest_framework ，#添加：DRF框架
首页,#子应用
]
中间件=[
CORS头球。中间件。CORS中间件，#添加：放首行（放其他行未测试)
姜戈。中间件。安全。安全中间件，
.
# CORS组的配置信息
CORS _原产地_白名单=(
http://127.0.0.1:8080,
# 这里需要注意： 1.必须添加http://否则报错(https未测试) 2.此地址就是允许跨域的地址，即前端地址
)
CORS _允许_凭证=真#允许创建交互式、快速动态网页应用的网页开发技术跨域请求时携带甜饼干
至此框架端配置完毕
3. 前端vue使用axios访问后端django提供的数据接口，安装axios
新公共管理安装axios -S
4. 前端vue配置axios插件，修改src/main.js
.
从" axios "导入axios//添加：导入爱可信包
//axios。默认值。with credentials=true//允许创建交互式、快速动态网页应用的网页开发技术发送请求时附带甜饼干
Vue.prototype. $ axios=axios//把对象挂载某视频剪辑软件中
5. 在XX.vue中跨域请求数据
已创建：函数(){
//获取轮播图
这个100美元axios。get( http://127。0 .0 .1:8000/本/).然后(响应={
console.log(response.data)
this.banner_list=response.data
}).catch(response={
console.log(响应)
})
//http://127 .0 .0 .1:8000/本/这个就是后端框架接口
代码
模板
div class=div1
El-carousel触发器= click 高度= 600像素
El-carousel-item v-for= book _ list中的图书：key=book.index
答：href= book。link rel=外部无跟随
img width= 80% :src= book。图像 alt=
/a
/El-旋转木马-项目
/El-旋转木马
/div
/模板
脚本
导出默认值{
名称：书，
data(){
返回{
book_list:[]
};
},
已创建：函数(){
//获取轮播图
这个100美元axios。get( http://127。0 .0 .1:8000/本/).然后(响应={
console.log(response.data)
this.book_list=response.data
}).catch(response={
console.log(响应)
})
}
}
/脚本
风格。div1 {
边距-顶部：100像素
高度：1000像素
}
img {
宽度：自动；
高度：自动；
最大宽度：100%;
最大高度：100%;
/风格
到此这篇关于django vue实现跨域的文章就介绍到这了，更多相关django vue跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。