Django解决跨域请求的问题
一、引入
对于想要利用django框架实现前后端分离的童鞋来说,首要的问题便是解决跨域请求的问题。何为跨域请求?简单来说,就是当前发起的请求的域与该请求指向的资源所在的域不一致。当协议+域名+端口号均相同,那么就是同一个域。举个例子,http://www.xxx.com发起了一个get请求,请求的地址是:http://www.xxx.com/getuserlist?u=test,这里就不存在跨域请求的问题。由于跨域请求存在诸多安全问题,例如CSRF攻击等,所以我们的浏览器针对这个安全问题会有一个同源策略,必须是我们上面说到的同源请求,才能顺利发出请求。
二、解决方案
其实解决同源问题的方法中,就我知道的有两种:
1.JSONP,比较原始的方法,本质上是利用html的一些不受同源策略影响的标签,诸如:<a>、<img>、<iframe>、<script>等,从而实现跨域请求,但是这种方法只支持GET的请求方式,也不是我今天所要介绍的方法;
2.CORS,Cross-Origin Resource Sharing,是一个新的 W3C 标准,它新增的一组HTTP首部字段,允许服务端其声明哪些源站有权限访问哪些资源。换言之,它允许浏览器向声明了 CORS 的跨域服务器,发出 XMLHttpReuest 请求,从而克服 Ajax 只能同源使用的限制。在我们的django框架中就是利用CORS来解决跨域请求的问题。
三、Django中如何使用CORS(在此之前,我的PC已经安装过python3了)
1.打开cmd,执行命令:pip install django-cors-headers
由于我已经安装过了django-cors-headers,所以这里提示我已经安装了,
2.修改django项目中的setting.py,
1 INSTALLED_APPS = [ 2 'django.contrib.admin', 3 'django.contrib.auth', 4 'django.contrib.contenttypes', 5 'django.contrib.sessions', 6 'django.contrib.messages', 7 'django.contrib.staticfiles', 8 'corsheaders',#这是我们的主角,放在新建的其他项目之前 9 'app01', 10 ] 11 MIDDLEWARE = [ 12 'django.middleware.security.SecurityMiddleware', 13 'django.contrib.sessions.middleware.SessionMiddleware', 14 'corsheaders.middleware.CorsMiddleware', #注意顺序,必须放在这儿 15 'django.middleware.common.CommonMiddleware', 16 'django.middleware.csrf.CsrfViewMiddleware', 17 'django.contrib.auth.middleware.AuthenticationMiddleware', 18 'django.contrib.messages.middleware.MessageMiddleware', 19 'django.middleware.clickjacking.XFrameOptionsMiddleware', 20 ]
CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True #允许所有的请求头 CORS_ALLOW_HEADERS = ('*')
3.效果,下左图是没有做相应的配置,有图是做了配置之后
四、部分代码
1.html部分
2.django部分
- 在WebKit中并行加载外部脚本译:
- 100行代码,搞定http监控框架
- 【腾讯反病毒实验室】深度剖析APT28最新作品
- [译]clearfix改良及overflow:hidden详解
- 深入解析CSS样式层叠权重值
- [译]CSS边框实现“无图化”设计
- 自适应的多列图文混排改进
- [译]Laravel 5.0 之运行环境及环境变量
- 90行代码,搞定日志监控框架
- Laravel Migrate 中的 Fresh 和 Refresh 命令
- 框架组件,究竟要不要自研?
- Nginx泛解析到子目录,自动判断有无public目录
- 撩妹必备,3行代码伪造出一个“好莱坞黑客”屏幕
- [译]Laravel 5.0 之事件调度程序 (定时任务)
- 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 数组属性和方法
- Linux中crontab定时任务不执行的原因
- Linux系统为什么要吃掉我的“内存”
- 教你如何修改Linux远程登录欢迎提示信息
- 详解linux 定时任务 crontabs 安装及使用方法
- 解决Centos7安装nginx后提示“Welcome to nginx on Fedora!”,conf.d目录下无default.conf文件
- 详解Linux中PostgreSQL和PostGIS的安装和使用
- 检测ip和port是否可连接的方法
- Linux关机时执行指定脚本功能实现
- 适用于稀疏的嵌入、独热编码数据的损失函数回顾和PyTorch实现
- CentOS7下实现终端输入中文设置详解
- CentOS 7.2搭建VNC远程桌面服务的方法
- Ubuntu挂载3T硬盘或大于2T磁盘的方法
- linux chroot命令详解
- Linux中如何查询运行文件的全路径的方法
- 基于可变自动编码器(VAE)的生成建模,理解可变自动编码器背后的原理