Django前后端分离跨域请求问题
时间:2019-10-22
本文章向大家介绍Django前后端分离跨域请求问题,主要包括Django前后端分离跨域请求问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、问题背景
之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应,同源策略也是浏览器针对请求的安全问题所作出的一种保护行为。针对跨域问题,可以有下面的解决方式:
- JSONP方式
- 自定义中间件,设置响应头
- 使用django-cors-headers包
二、解决方式
(一)自定义中间件
JSONP本质上是利用html的一些不受同源策略影响的标签属性src,例如:<a>、<img>、<script>等标签的src属性,从而实现跨域请求,但是这种方法只支持GET的请求方式,这里暂不做过多讨论,主要说自定义中间件以及利用django-cors-headers包来实现跨域。
1、自定义中间件
class MiddlewareMixin(object): def __init__(self, get_response=None): self.get_response = get_response super(MiddlewareMixin, self).__init__() def __call__(self, request): response = None if hasattr(self, 'process_request'): response = self.process_request(request) if not response: response = self.get_response(request) if hasattr(self, 'process_response'): response = self.process_response(request, response) return response class CORSMiddleware(MiddlewareMixin): def process_response(self,request,response): # 添加响应头 # 允许相应的域名来访问,多个域名中间以逗号隔开,如果全部可使用'*' response['Access-Control-Allow-Origin'] = "*" # 允许携带的请求头,多个中间以逗号隔开 response['Access-Control-Allow-Headers'] = "Content-Type" # 允许发送的请求方式 response['Access-Control-Allow-Methods'] = "DELETE,PUT" return response
2、注册中间件(在settings文件中注册)
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', ... ... 'crm.utils.cors.CORSMiddleware' #跨域中间件 ]
(二)CORS(Cross-Origin Resource Sharing)
1、安装django-cors-headers包
pip install django-cors-headers #在对应的开发环境中安装
2、修改settings文件
- 注册应用
# Application definition INSTALLED_APPS = [ 'django.contrib.admin', ...'django.contrib.staticfiles', 'corsheaders',#放在新建应用之前 'rest_framework', ...'crm' ]
- 中间件注册
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'corsheaders.middleware.CorsMiddleware', # 注意顺序,放在此处 'django.middleware.common.CommonMiddleware', ... ]
- 其它设置
CORS_ORIGIN_ALLOW_ALL = True #允许所有的请求,或者设置CORS_ORIGIN_WHITELIST,二选一 CORS_ALLOW_HEADERS = ('*') #允许所有的请求头 CORS_ALLOW_CREDENTIALS = True # 允许携带cookie,前端需要携带cookies访问后端时,需要设置withCredentials: true
这样就可以进行跨域使用了。
但是大多数站点将需要利用Django提供的跨站点请求伪造保护。CORS和CSRF是分开的,并且Django无法使用您的CORS配置免除网站Referer
对安全请求所做的检查。做到这一点的方法是使用其CSRF_TRUSTED_ORIGINS设置。
3、CSRF整合
#1、CSRF_TRUSTED_ORIGINS 设置 CORS_ORIGIN_WHITELIST = [ ' http://read.only.com ', ' http://change.allowed.com ', ] #不需要CORS_ORIGIN_ALLOW_ALL=True的设置 CSRF_TRUSTED_ORIGINS = [ ' change.allowed.com ', ] #2、中间件设置 #启用此功能在django.middleware.csrf.CsrfViewMiddleware后,还应添加#corsheaders.middleware.CorsPostCsrfMiddleware MIDDLEWARE_CLASSES = [ ... ' corsheaders.middleware.CorsMiddleware ', ... ' django.middleware.csrf.CsrfViewMiddleware ', 'corsheaders.middleware.CorsPostCsrfMiddleware ', ... ]
详情参考官方文档:https://github.com/adamchainz/django-cors-headers
原文地址:https://www.cnblogs.com/shenjianping/p/11718925.html
- 【前沿】见人识面,TensorFlow实现人脸性别/年龄识别
- TensorFlow从0到1 - 1 - Hello, TensorFlow!
- iOS自动布局——Masonry详解
- BZOJ 3450: Tyvj1952 Easy
- [编程经验] TensorFlow实现线性支持向量机SVM
- TensorFlow从0到1 - 2 - TensorFlow核心编程
- BZOJ 4318: OSU!
- 讨厌算法的程序员 5 - 合并算法
- 洛谷 P2679 子串
- [编程经验] CVPR2017论文全集下载代码脚本分享
- 讨厌算法的程序员 6 - 归并排序
- [编程经验] Tensorflow中的共享变量机制小结
- 洛谷 P1313 计算系数
- 一文搞懂浏览器自动化测试框架selenium!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Typecho 文章置顶插件:Sticky
- SpringBoot源码学习(一)
- Typecho Markdown编辑器粘贴剪贴板图片插件:PasteImage
- SpringBoot源码学习(二)
- 【React+Typescript+Antd】Echarts滑动卡顿问题解决
- 13个超实用的JavaScript数组操作技巧
- 【React+Typescript+Antd】图表——Echarts
- 【React+Typescript+Antd】页面内局部路由跳转
- 第1天:网易2018年校园招聘NLP算法工程师笔试试卷分析
- 【React+Typescript+Antd】全局路由跳转
- 【React+Typescript+Antd】防止样式感染——LESS CSS 框架简介
- 【React+Typescript+Antd】界面框架布局——Layout布局+ Grid栅格
- SpringBoot源码学习(三)
- Axure RP 9 安装与中文汉化
- Linux 离线安装docker的过程