详解Django解决ajax跨域访问问题


Posted in Python onAugust 24, 2018

这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料,文中介绍的实现方法包括:使用django-cors-headers全局控制、使用JsonP,只能用于Get方法以及在views.py里设置响应头,只能控制单个接口,需要的朋友可以参考下。
使用Django在服务器端写了一个API,返回一个JSON数据。使用Ajax调用该API:

但是,Chrome浏览器提示错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是由于CORS导致的。

什么是CORS?

CORS(跨域资源共享,Cross-Origin Resource Sharing)是一种跨域访问的机制,可以让Ajax实现跨域访问。
其实,在服务器的response header中,加入“Access-Control-Allow-Origin: *”即可支持CORS,非常的简单,apache/nginx等怎么配置,见参考文档。
举个例子:

  1. API部署在DomainA上;
  2. Ajax文件部署在DomainB上,Ajax文件会向API发送请求,返回数据;
  3. 用户通过DomainC访问DomainB的Ajax文件,请求数据

详解Django解决ajax跨域访问问题

前端打开的是'http://localhost:63343‘地址, 另一个是django服务器,打开了‘http://localhost:8000‘地址, 所以在'http://localhost:63343‘的javascript对'http://localhost:8000‘进行访问时,端口不同,属于跨域访问.

当我将前端页面放入django中后,就不会出现跨域访问的拒绝了.

几种方法:

1.使用JSONP使用Ajax获取json数据时,存在跨域的限制。不过,在Web页面上调用js的script脚本文件时却不受跨域的影响,JSONP就是利用这个来实现跨域的传输。因此,我们需要将Ajax调用中的dataType从JSON改为JSONP(相应的API也需要支持JSONP)格式。
JSONP只能用于GET请求。

2.直接修改Django中的views.py文件修改views.py中对应API的实现函数,允许其他域通过Ajax请求数据:

def myview(_request): 
 response = HttpResponse(json.dumps({"key": "value", "key2": "value"}))
 response["Access-Control-Allow-Origin"] = "*" 
 response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS" 
 response["Access-Control-Max-Age"] = "1000" 
 response["Access-Control-Allow-Headers"] = "*" 
 return response

3.安装django-cors-headers这里还有一各发现!在Django中,有人开发了CORS-header的middleware,只在settings.py中做一些简单的配置即可,开启CORS,没有跨域烦恼,真爽!~

django-cors-headers

首先安装

pip install django-cors-headers

然后在settings.py里配置一番就可以

INSTALLED_APPS = [ 
  ... 
  'corsheaders', 
  ... ] 
 MIDDLEWARE_CLASSES = ( 
  ... 
  'corsheaders.middleware.CorsMiddleware', 
  'django.middleware.common.CommonMiddleware', # 注意顺序 
  ... 
 ) 
#跨域增加忽略 
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = ( '*') 
CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) 
CORS_ALLOW_HEADERS = ( 
'XMLHttpRequest', 
'X_FILENAME', 
'accept-encoding', 
'authorization', 
'content-type', 
'dnt',
'origin', 
'user-agent', 
'x-csrftoken', 
'x-requested-with', 
'Pragma', 
)

大功告成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中暂存上传图片的方法
Feb 18 Python
使用Python压缩和解压缩zip文件的教程
May 06 Python
利用PyInstaller将python程序.py转为.exe的方法详解
May 03 Python
高质量Python代码编写的5个优化技巧
Nov 16 Python
python reduce 函数使用详解
Dec 05 Python
Python完成哈夫曼树编码过程及原理详解
Jul 29 Python
用python爬取历史天气数据的方法示例
Dec 30 Python
Python定义函数实现累计求和操作
May 03 Python
Django web自定义通用权限控制实现方法
Nov 24 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
Dec 21 Python
PyTorch梯度裁剪避免训练loss nan的操作
May 24 Python
Python使用BeautifulSoup4修改网页内容
May 20 Python
Python面向对象之反射/自省机制实例分析
Aug 24 #Python
Python使用装饰器模拟用户登陆验证功能示例
Aug 24 #Python
Python日志模块logging基本用法分析
Aug 23 #Python
Python多继承原理与用法示例
Aug 23 #Python
Python抽象和自定义类定义与用法示例
Aug 23 #Python
Python引用计数操作示例
Aug 23 #Python
python实现括号匹配的思路详解
Aug 23 #Python
You might like
php中的时间显示
2007/01/18 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
重写javascript中window.confirm的行为
2012/10/21 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
拖动时防止选中
2017/02/03 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python实现按行分割文件
2019/07/22 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
如何真正的了解python装饰器
2020/08/14 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
终端业务员岗位职责
2013/11/27 职场文书
科级干部考察材料
2014/02/15 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
小学生家长意见
2015/06/03 职场文书
单位工作证明范本
2015/06/15 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
使用CSS设置滚动条样式
2022/01/18 HTML / CSS