Django跨域请求原理及实现代码


Posted in Python onNovember 14, 2020

一 同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据

浏览器上就会报错,个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:8001/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')

但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截

二 CORS(跨域资源共享)简介

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

三 CORS基本流程

  • 浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
  • 浏览器发出CORS简单请求,只需要在头信息之中增加一个Origin字段。
  • 浏览器发出CORS非简单请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

四 CORS两种请求详解

只要同时满足以下两大条件,就属于简单请求。

(1) 请求方法是以下三种方法之一:

  1. HEAD
  2. GET
  3. POST

(2)HTTP的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID

Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

创建两个Django项目:简单请求:get、application/x-www-form-urlencoded

mysite1项目---------127.0.0.0:8008 (8008向8006端口发送简单请求)

views.py

from django.shortcuts import render
# Create your views here.
def test(request):
  return render(request,'index.html')

template/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="/static/jquery-3.3.1.js"></script>
  <title>Title</title>
</head>
<body>
<button id="mybutton">点我</button>
</body>
<script>

  $("#mybutton").click(function () {
    $.ajax({
      url:'http://127.0.0.1:8006/mytest',  #向该ip端口发送一个get的简单请求
      type:'get',
      success:function (data) {
        console.log(data)
      }
    })
  })
</script>
</html>

mysite2项目---------127.0.0.0:8006

views.py

def mytest(request):
  import json
  print('111')
  obj = HttpResponse(json.dumps({'name': 'lqz'}))
  # if request.method=='OPTIONS':
  #   obj['Access-Control-Allow-Methods']='PUT'
  #   obj['Access-Control-Allow-Headers']='k1'
  #
  #
  # # obj['Access-Control-Allow-Origin']='http://127.0.0.1:8008'
  # obj['Access-Control-Allow-Origin']='*'
  return obj

Django跨域请求原理及实现代码

就是由于同源策略被被浏览器阻止了,所以请求没有成功返回数据(其实数据已经从服务器成功请求回来,只是由于同源策略请求成功的数据被浏览器阻止了)

凡是不同时满足上面两个条件,就属于非简单请求。

浏览器对这两种请求的处理,是不一样的。

* 简单请求和非简单请求的区别?

简单请求:一次请求

非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。

* 关于“预检”

- 请求方式:OPTIONS

- “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息

- 如何“预检”

=> 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过

Access-Control-Request-Method

=> 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过

Access-Control-Request-Headers

支持跨域,简单请求

服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'

支持跨域,复杂请求

由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。

  • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
  • “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers

五 Django项目中支持CORS

在返回的结果中加入允许信息(简单请求)

def test(request):
  import json
  obj=HttpResponse(json.dumps({'name':'lqz'}))
  # obj['Access-Control-Allow-Origin']='*'
  obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'
  return obj

放到中间件处理复杂和简单请求:

from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
  def process_response(self,request,response):
    if request.method=="OPTIONS":
      #不能加*
      response["Access-Control-Allow-Headers"]="Content-Type"
    response["Access-Control-Allow-Origin"] = "http://localhost:8080"
    return response

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

Python 相关文章推荐
python self,cls,decorator的理解
Jul 13 Python
python实现bucket排序算法实例分析
May 04 Python
Python3一行代码实现图片文字识别的示例
Jan 15 Python
详解python分布式进程
Oct 08 Python
Pycharm+Scrapy安装并且初始化项目的方法
Jan 15 Python
python使用参数对嵌套字典进行取值的方法
Apr 26 Python
python django model联合主键的例子
Aug 06 Python
Python学习笔记之lambda表达式用法详解
Aug 08 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
May 27 Python
Python学习之路之pycharm的第一个项目搭建过程
Jun 18 Python
Python实现列表索引批量删除的5种方法
Nov 16 Python
python解决OpenCV在读取显示图片的时候闪退的问题
Feb 23 Python
Pycharm如何自动生成头文件注释
Nov 14 #Python
分布式全文检索引擎ElasticSearch原理及使用实例
Nov 14 #Python
Django websocket原理及功能实现代码
Nov 14 #Python
Pycharm常用快捷键总结及配置方法
Nov 14 #Python
Django model class Meta原理解析
Nov 14 #Python
详解python爬取弹幕与数据分析
Nov 14 #Python
Ubuntu权限不足无法创建文件夹解决方案
Nov 14 #Python
You might like
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
laravel 数据验证规则详解
2019/10/23 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
Python如何实现单例模式
2016/06/03 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
美发店5.1活动方案
2014/01/24 职场文书
人事经理岗位职责
2014/04/28 职场文书
音乐教师求职信
2014/06/28 职场文书
小学清明节活动总结
2014/07/04 职场文书
毕业生实习证明
2014/09/19 职场文书