详解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 抓取动态网页内容方案详解
Dec 25 Python
python获得文件创建时间和修改时间的方法
Jun 30 Python
Python实现Mysql数据库连接池实例详解
Apr 11 Python
利用Django内置的认证视图实现用户密码重置功能详解
Nov 24 Python
Python 绘图库 Matplotlib 入门教程
Apr 19 Python
Python键盘输入转换为列表的实例
Jun 23 Python
手把手教你如何安装Pycharm(详细图文教程)
Nov 28 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
Feb 12 Python
python实现可变变量名方法详解
Jul 01 Python
Django使用模板后无法找到静态资源文件问题解决
Jul 19 Python
Python Flask异步发送邮件实现方法解析
Aug 01 Python
python 多态 协议 鸭子类型详解
Nov 27 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
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
javascript自执行函数
2017/02/10 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
vue实现分页加载效果
2019/12/24 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python pandas常用函数详解
2018/02/07 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python对象属性自动更新操作示例
2018/06/15 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python输出决策树图形的例子
2019/08/09 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
接受捐赠答谢词
2014/01/27 职场文书
自主招生自荐信指南
2014/02/04 职场文书
一句话工作感言
2014/03/01 职场文书
党员承诺书范文
2014/05/19 职场文书
恰同学少年观后感
2015/06/08 职场文书
中学团支部工作总结
2015/08/13 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js