前后台跨域交互

分离的前后台交互

后台处理跨域

安装插件

1 2 3

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

项目配置：dev.py

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

# 注册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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<template> <div class="banner"> <el-carousel height="400px"> <el-carousel-item v-for="banner in banner_list" :key="item"> <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 () { this.$axios.get('http://127.0.0.1:8000/home/banners/').then(response => { console.log(response.data); this.banner_list = response.data.msg; }).catch(error => { console.log(">>>", error); }) } } </script> <style scoped> .el-carousel__item { height: 400px; min- 1200px; } .el-carousel__item img { height: 400px; margin-left: calc(50% - 1920px / 2); } </style>