django+vue实现跨域
版本
Django 2.2.3
Python 3.8.8
djangorestframework 3.13.1
django-cors-headers 3.11.0
django实现跨域
说明:此处方法为后端解决跨越,即django端解决跨越。
1. 安装 django-cors-headers
库
pip install django-cors-headers
2. 修改项目配置文件 项目/settings.py
...
# Application definition
INSTALLED_APPS = [
'django.contrib.staticfiles',
'corsheaders', # 添加:跨域组件
'rest_framework', # 添加:DRF框架
'home', # 子应用
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 添加:放首行(放其他行未测试)
'django.middleware.security.SecurityMiddleware',
...
]
...
# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8080',
# 这里需要注意: 1. 必须添加http://否则报错(https未测试) 2. 此地址就是允许跨域的地址,即前端地址
)
CORS_ALLOW_CREDENTIALS = True # 允许ajax跨域请求时携带cookie
...
至此django端配置完毕
3. 前端vue使用axios
访问后端django提供的数据接口,安装axios
npm install axios -S
4. 前端vue配置axios
插件,修改src/main.js
...
import axios from 'axios'; // 添加: 导入axios包
// axios.defaults.withCredentials = true; // 允许ajax发送请求时附带cookie
Vue.prototype.$axios = axios; // 把对象挂载vue中
···
5. 在XX.vue
中跨域请求数据
···
created: function() {
// 获取轮播图
this.$axios.get("http://127.0.0.1:8000/book/").then(response => {
console.log(response.data)
this.banner_list = response.data
}).catch(response => {
console.log(response)
})
// http://127.0.0.1:8000/book/ 这个就是后端django接口
···
点击查看代码
<template>
<div class="div1">
<el-carousel trigger="click" height="600px">
<el-carousel-item v-for="book in book_list" :key="book.index">
<a :href="book.link">
<img width="80%" :src="book.image" alt="">
</a>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name:"Book",
data(){
return {
book_list:[]
};
},
created: function() {
// 获取轮播图
this.$axios.get("http://127.0.0.1:8000/book/").then(response => {
console.log(response.data)
this.book_list = response.data
}).catch(response => {
console.log(response)
})
}
}
</script>
<style>
.div1 {
margin-top: 100px;
height: 1000px
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
</style>
django+vue实现跨域的更多相关文章
- django 前端请求跨域问题解决
django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...
- Django框架 之 跨域请求伪造
Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...
- 跨域问题和django中实现跨域
跨域问题 1.同源策略(浏览器的安全功能): 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同 2.CORS跨域资源共享 实现CORS通信的关键是服务器,只要服务器实 ...
- django 12天(跨域,文件上传,下载,cookie,session)
django 12天(跨域,文件上传,下载) 跨域 什么是跨域 1.协议不同 2.端口不同 3.主机不同 如何解决跨域 1.安装django-cors-headers模块 2.在settings.py ...
- vue解决跨域问题
vue解决跨域问题 vue跨域解决方法和小总结 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow ...
- vue实现跨域请求的设置
vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...
- django中解决跨域问题
-跨域问题 -浏览器的:同源策略,浏览器拒绝不是当前域域返回的数据 -ip地址和端口号都相同才是同一个域 -如何解决: -CORS:跨域资源共享 -简单请求:发一次请求 -非简单请求:非简单请求是发送 ...
- 在django中解决跨域AJAX
由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接收罢了. 浏览器同源 ...
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
随机推荐
- C++基本面试题1
#include<iostream>using namespace std;class A{public: A(char* s) :name(s), len(strlen(name.c_s ...
- 字符串自实现(一)(mystrcpy,mystrcat,mystrcmp)
char* mystrcpy(char* str_one,const char* str_two) { char* tmp = str_one; while (*str_one++ = *str_tw ...
- gin框架中图形验证码的生成和验证
功能和验证码使用原理 本案例中没有使用redis作为缓存,而是使用的内存存储方法 github链接地址 下载命令 go get github.com/mojocn/base64Captcha 请求处理 ...
- Servlet-IDEA菜单生成Servlet程序
更快捷方法生成Servlet程序(IDEA菜单生成Servlet) 菜单:new ---> Servlet程序 取消注解做这个配置 可以创建Servlet程序,编写HelloServlet3类, ...
- Tomcat服务器和Servlet版本的对应关系
Tomcat服务器和Servlet版本的对应关系 Servlet 程序从2.5版本是现在世面使用最多的版本(xml配置) 到了Servlet3.0后.就是注解版本的Servlet使用
- 关于使用学生或者教师身份免费使用JetBrains全家桶的说明
官网操作 JetBrains是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄罗斯的圣彼得堡及美国麻州波士顿都设有办公室,该公司有众多的好用的IDE,比如pycharm,webstorm,Int ...
- dubbo框架的使用方法。。。
图解. 一.dubbo使用须知. 1.所有的service层必须要使用service注解(之前用的spring框架的,现在用dubbo框架所提供的@Service注解) // @Service(tim ...
- 使用IndexedDB缓存给WebGL三维程序加速
前言 使用webgl开发三维应用的时候,经常会发现三维场景加载比较慢,往往需要等待挺长时间,这样用户的体验就很不友好. 造成加载慢的原因,主要是三维应用涉及到的资源文件会特别多,这些资源文件主要是模型 ...
- 「SDWC2018 Day1」网格
题目当中有三条限制,我们来逐一考虑.对于第一条限制,每次走动的增加量 \(x_i \le M_x, y_i \le M_y\),可以发现一共走的步数是确定的,那么就相当于解这样两个方程组: \[x_1 ...
- Java 给Word每一页设置不同图片水印效果
Word中设置水印时,可加载图片设置为水印效果,但通常添加水印效果时,会对所有页面都设置成统一效果,如果需要对每一页或者某个页面设置不同的水印效果,则可以参考本文中的方法.下面,将以Java代码为例, ...