路飞-后台处理跨域问题

Posted dcentman

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了路飞-后台处理跨域问题相关的知识,希望对你有一定的参考价值。

分离的前后台交互

后台处理跨域

安装插件
"""
>: 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

前台请求Banner数据

修订Banner.vue
<template>
    <el-carousel height="520px" :interval="3000" arrow="always">
        <!-- 渲染后台数据 -->
        <el-carousel-item v-for="banner in banner_list" :key="banner.name">
            <a :href="banner.link">
                <img :src="banner.image" alt="" :title="banner.note">
            </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 => {
                // window.console.log(response.data);
                this.banner_list = response.data;
            }).catch(errors => {
                window.console.log(errors)
            })
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .el-carousel__item img {
        text-align: center;
        height: 520px;
        margin: 0 auto;
        display: block;
    }
</style>

以上是关于路飞-后台处理跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

路飞-后台Django项目创建

路飞-后台xadmin配置

路飞-后台home模块

关于跨域的处理的几种方法的整理

Nginx处理前端跨域(补充)

后台处理跨域