前后台分离跨域交互

后台处理跨域

安装插件

>: pip install django-cors-headers插件参考地址：https://github.com/ottoyiu/django-cors-headers/

项目配置：dev.py

# 注册app
INSTALLED_APPS = [...'corsheaders',
]# 添加中间件
MIDDLEWARE = [...'corsheaders.middleware.CorsMiddleware',
]# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True# 允许的请求头
CORS_ALLOW_HEADERS = ("accept","accept-encoding","authorization","content-type","dnt","origin","user-agent","x-csrftoken","x-requested-with",# 额外允许的请求头'token',
)

前台请求Banner数据

修订Banner.vue

<template><div class="banner">
<!--        <el-carousel height="400px">-->
<!--            <el-carousel-item v-for="item in 4" :key="item">-->
<!--                <img src="../assets/img/banner1.png" alt="">-->
<!--            </el-carousel-item>-->
<!--        </el-carousel>--><el-carousel height="400px"><el-carousel-item v-for="banner in banner_list" :key="banner.title"><router-link :to="banner.link"><img :src="banner.image" alt=""></router-link></el-carousel-item></el-carousel></div>
</template><script>export default {name: "Banner",data() {return {banner_list: []}},// 在created钩子中created() {this.$axios({url: this.$settings.base_url + '/home/banners/',headers: {  // 测试前台给后台提交请求头// authorization: 'jwt abc.def.xyz',// token: 'jwt abc.def.xyz',}}).then(response => {console.log(response.data);this.banner_list = response.data;}).catch(error => {console.log(">>>", error);})}}
</script><style scoped>.el-carousel__item {height: 400px;min-width: 1200px;}.el-carousel__item img {height: 400px;margin-left: calc(50% - 1920px / 2);}
</style>