详解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读取mp3中ID3信息的方法
Mar 05 Python
python 写的一个爬虫程序源码
Feb 28 Python
python基础_文件操作实现全文或单行替换的方法
Sep 04 Python
Django实现快速分页的方法实例
Oct 22 Python
python实现感知器
Dec 19 Python
让代码变得更易维护的7个Python库
Oct 09 Python
matplotlib实现区域颜色填充
Mar 18 Python
python列表每个元素同增同减和列表元素去空格的实例
Jul 20 Python
Python通过kerberos安全认证操作kafka方式
Jun 06 Python
Python Numpy之linspace用法说明
Apr 17 Python
Python-typing: 类型标注与支持 Any类型详解
May 10 Python
python缺失值的解决方法总结
Jun 09 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
Vue精简版风格概述
2018/01/30 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
MySQL最常见的操作语句小结
2015/05/07 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
数据库方面面试题
2012/04/22 面试题
J2EE面试题大全
2016/08/06 面试题
毕业生的自我评价
2013/12/30 职场文书
汇源肾宝广告词
2014/03/20 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
小学少先队活动总结
2015/05/08 职场文书
大学同学聚会感言
2015/07/30 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Golang 对es的操作实例
2022/04/20 Golang