11.前后台分离跨域交互

分离的前后台交互

后台处理跨域

安装

 pip install django-cors-headers

配置settings.py

 INSTALLED_APPS = [
     ...
     'corsheaders',
     ...
 ]
 ​
 MIDDLEWARE = [
     'corsheaders.middleware.CorsMiddleware',    # 放最前面
     ...
 ]
 ​

1. CORS_ORIGIN_ALLOW_ALL: 添加允许执行跨站点请求的主机

 # 如果为True，则将不使用白名单，并且将接受所有来源。默认为False
 CORS_ORIGIN_ALLOW_ALL = True    

1. CORS_ORIGIN_WHITELIST: 授权进行跨站点HTTP请求的来源列表。默认为[]

 CORS_ORIGIN_WHITELIST = [
     "https://example.com"，
     "https://sub.example.com"，
     "http//localhost:8080",
     "http://127.0.0.1:9000",
 ]

1. CORS_ORIGIN_REGEX_WHITELIST: 代表正则表达式的字符串列表

 CORS_ORIGIN_REGEX_WHITELIST = [
     r"^https://\w+\.example\.com$",
 ]

1. CORS_URLS_REGEX: 只需要在网站的一部分上使用CORS时很有用，例如位于的API /api/。 CORS_URLS_REGEX = r'^/api/.*$'

2. CORS_ALLOW_METHODS: 实际请求所允许的HTTP动词列表。

 # 默认为
 # CORS_ALLOW_METHODS = [
 #     'DELETE',
 #     'GET',
 #     'OPTIONS',
 #     'PATCH',
 #     'POST',
 #     'PUT',
 # ]
 ​
 # 自定义所允许的http动词列表
 from corsheaders.defaults import default_methods
 CORS_ALLOW_METHODS = list(default_methods) + [
     'POKE',
 ]

1. CORS_ALLOW_HEADERS: 发出实际请求时可以使用的非标准HTTP标头的列表。

 # 默认为:
 CORS_ALLOW_HEADERS = [
     'accept',
     'accept-encoding',
     'authorization',
     'content-type',
     'dnt',
     'origin',
     'user-agent',
     'x-csrftoken',
     'x-requested-with',
 ]
 ​
 # 自定义http标头
 from corsheaders.defaults import default_headers
 CORS_ALLOW_HEADERS = list(default_headers) + [
     'my-custom-header',
 ]

1. CORS_EXPOSE_HEADERS: 将向浏览器公开的HTTP标头列表。默认为 []。

2. CORS_PREFLIGHT_MAX_AGE:

客户端/浏览器可以缓存预检响应的秒数。如果该值为0（或任何错误值），则不会发送最大期限标头。默认为 86400（一天）。

注意：预检请求是在发出“不太简单”的请求（例如Content-Type，不是 application/x-www-form-urlencoded）时确定的，它是确定服务器实际接受的请求的额外请求。

1. CORS_ALLOW_CREDENTIALS: 如果为True，则将允许将cookie包含在跨站点HTTP请求中。默认为False

在Django 2.1中，添加了SESSION_COOKIE_SAMESITE设置，'Lax’默认情况下设置为 ，这将防止Django的会话cookie跨域发送。更改它以None绕过此安全限制。

1. CSRF整合

大多数站点都需要利用Django提供的跨站点请求伪造保护。CORS和CSRF是分开的，并且Django无法使用您的CORS配置免除网站Referer对安全请求所做的检查。做到这一点的方法是使用其CSRF_TRUSTED_ORIGINS设置。例如：

 CORS_ORIGIN_WHITELIST = [
     'http://read.only.com',
     'http://change.allowed.com',
 ]
 ​
 CSRF_TRUSTED_ORIGINS = [
     'change.allowed.com',
 ]

1. CORS_REPLACE_HTTPS_REFERER

CSRF_TRUSTED_ORIGINS是Django 1.9中引入的，因此早期版本的用户将需要替代解决方案。如果CORS_REPLACE_HTTPS_REFERER为 True，CorsMiddleware则将Referer标头更改为每当CORS检查通过时将通过Django的CSRF检查的内容。默认为 False。

请注意，与不同CSRF_TRUSTED_ORIGINS，此设置不允许您区分CORS 信任读取资源的域和避免CSRF保护而信任更改资源的域。

启用此功能corsheaders.middleware.CorsPostCsrfMiddleware后django.middleware.csrf.CsrfViewMiddleware，还应该在之后 添加，MIDDLEWARE_CLASSES以撤消Referer替换：

 MIDDLEWARE_CLASSES = [
     ...
     'corsheaders.middleware.CorsMiddleware',
     ...
     'django.middleware.csrf.CsrfViewMiddleware',
     'corsheaders.middleware.CorsPostCsrfMiddleware',
     ...
 ]

 

前台请求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>