11.前后台分离跨域交互
分离的前后台交互
后台处理跨域
pip install django-cors-headers
配置settings.py
INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 放最前面
...
]
-
CORS_ORIGIN_ALLOW_ALL: 添加允许执行跨站点请求的主机
# 如果为True，则将不使用白名单，并且将接受所有来源。默认为False
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = [
"https://example.com"，
"https://sub.example.com"，
"http//localhost:8080",
"http://127.0.0.1:9000",
]
-
CORS_ORIGIN_REGEX_WHITELIST: 代表正则表达式的字符串列表
CORS_ORIGIN_REGEX_WHITELIST = [
r"^https://\w+\.example\.com$",
]
-
CORS_URLS_REGEX: 只需要在网站的一部分上使用CORS时很有用，例如位于的API /api/。
CORS_URLS_REGEX = r'^/api/.*$' -
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',
]
-
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',
]
-
CORS_EXPOSE_HEADERS: 将向浏览器公开的HTTP标头列表。默认为 []。
-
CORS_PREFLIGHT_MAX_AGE:
客户端/浏览器可以缓存预检响应的秒数。如果该值为0（或任何错误值），则不会发送最大期限标头。默认为 86400（一天）。
注意：预检请求是在发出“不太简单”的请求（例如Content-Type，不是 application/x-www-form-urlencoded）时确定的，它是确定服务器实际接受的请求的额外请求。
-
CORS_ALLOW_CREDENTIALS: 如果为True，则将允许将cookie包含在跨站点HTTP请求中。默认为False
在Django 2.1中，添加了SESSION_COOKIE_SAMESITE设置，'Lax’默认情况下设置为 ，这将防止Django的会话cookie跨域发送。更改它以None绕过此安全限制。
-
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',
]
-
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>