前后台分离交互

39 前后台分离交互

前台axios

<template>
    <el-carousel height="520px" :interval="3000" arrow="always">
        <el-carousel-item  v-for="banner in banner_list" :key="banner.image">
            <!--<router-link :to="banner.link">-->
                    <!--<img :src="banner.image" alt="">-->
                <!--</router-link>-->
            <a :href="banner.link"><img :src="banner.image" alt=""></a>

        </el-carousel-item>
    </el-carousel>
</template>
<!---->
<script>
    export default {
        name: "Banner",
        data(){
            return {
                banner_list:[]
            }
        },
        created() {
            this.$axios({
                url:this.$settings.base_url+'/home/banners/',
                method:'get',
            }).then(response=>{
                this.banner_list=response.data
            }).catch(error=>{
                console.log(error)
            })


        }
    }
</script>

后台处理跨域问题

'''
https://github.com/ottoyiu/django-cors-headers/

安装django-cors-headers模块

在settings.py中配置
# 注册app
INSTALLED_APPS = [
	...
	'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]


# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = False
# 配置指定跨域域名
CORS_ORIGIN_WHITELIST = [
         'http://127.0.0.1:8080',
	    'http://localhost:8080',
]

# 允许ajax请求携带cookie
CORS_ALLOW_CREDENTIALS = True


# 注：前台请求头携带参数，中间件拒绝Access-Control-Allow-Headers错误，中间件要设置 default_headers
from corsheaders import defaults
在 default_headers 中添加 '前端ajax请求头里面的字段名'
'''