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的迭代器和生成器使用实例
Jan 14 Python
Django项目中包含多个应用时对url的配置方法
May 30 Python
pandas使用get_dummies进行one-hot编码的方法
Jul 10 Python
Python爬虫的两套解析方法和四种爬虫实现过程
Jul 20 Python
Python实现基于POS算法的区块链
Aug 07 Python
python 自动轨迹绘制的实例代码
Jul 05 Python
django基础学习之send_mail功能
Aug 07 Python
pytorch 在sequential中使用view来reshape的例子
Aug 20 Python
python中几种自动微分库解析
Aug 29 Python
Django静态文件加载失败解决方案
Aug 26 Python
浅谈Python列表嵌套字典转化的问题
Apr 07 Python
python中使用 unittest.TestCase单元测试的用例详解
Aug 30 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中的类-什么叫类
2006/11/20 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
JavaScript手机振动API
2016/06/11 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
python进阶教程之词典、字典、dict
2014/08/29 Python
基于python编写的微博应用
2014/10/17 Python
Python操作csv文件实例详解
2017/07/31 Python
python更改已存在excel文件的方法
2018/05/03 Python
python和shell获取文本内容的方法
2018/06/05 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python提取log文件内容并画出图表
2019/07/08 Python
python如何写try语句
2020/07/14 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
优秀村官事迹材料
2014/01/10 职场文书
寄语是什么意思
2014/04/10 职场文书
爱情保证书大全
2014/04/29 职场文书
体育运动会广播稿
2014/10/05 职场文书
教师个人发展总结
2015/02/11 职场文书
感恩主题班会教案
2015/08/12 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
vue router 动态路由清除方式
2022/05/25 Vue.js