Django实现跨域请求过程详解

更新时间：2019年07月25日 15:26:32 作者：Title

这篇文章主要介绍了Django实现跨域请求过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言

CORS 即 Cross Origin Resource Sharing 跨域资源共享.

跨域请求分两种：简单请求、复杂请求.

简单请求

简单请求必须满足下述条件.

HTTP方法为这三种方法之一：HEAD、GET、POST

HTTP头消息不超出以下字段：

Accept、Accept-Language、Content-Language、Last-Event-ID

且Content-Type只能为下列类型中的某一个：

application/x-www-from-urlencoded
multipart/form-data
text/plain.

==任何不满足上述要求的请求，都会被认为是复杂请求.

复杂请求会先发出一个预请求——预检，OPTIONS请求.==

浏览器的同源策略

无法跨域就是被浏览器的同源策略限制的.

也就是说，==浏览器会阻止非同源的请求.==

那什么是非同源呢？==域名或端口不同的，都属于非同源.==

==浏览器只会阻止表单以及Ajax请求的跨域，但不会阻止src请求跨域.==

所以，我们的cdn、图片等src请求都是正常的.

JsonP实现跨域

==JsonP跨域的原理是利用了浏览器不阻止src请求跨域来实现的.==

==JsonP只能实现GET请求跨域.==

首先准备我们的视图文件

from django.http import HttpResponse
from rest_framework.views import APIView

class TestView(APIView):
  def get(self, request):
    return HttpResponse("handlerResponse('is ok')")
    # 注意返回的函数以及参数的格式

然后 HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>JsonP跨站请求测试</title>
</head>
<body>
<script>
  // 函数名应为handlerResponse，这是一种约定俗成
  function handlerResponse(data) {
    alert(data)
  }
</script>
<!--必须放在被执行函数的script标签的下面，否则会报错函数不存在-->
<script src="http://127.0.0.1:8000/test/"></script>
</body>
</html>

好了我们来测试吧

可以看到，我们成功实现了跨域获取数据.

JsonP解决跨域只能发送GET请求，并且实现起来前后端交互会比较多，现在几乎已经不在使用了

在Django中间件中添加响应头

可实现简单请求和复杂请求的跨域

第一步准备中间件

from django.utils.deprecation import MiddlewareMixin

class MyCors(MiddlewareMixin):
  def process_response(self, request, response):
    # 如下，等于'*'后，便可允许所有简单请求的跨域访问
    response['Access-Control-Allow-Origin'] = '*'

    # 判断是否为复杂请求
    if request.method == 'OPTIONS':
      response['Access-Control-Allow-Headers'] = 'Content-Type'
      response['Access-Control-Allow-Methods'] = 'PUT,PATCH,DELETE'

    return response

写好之后，别忘记了去注册.

第二步视图文件

from django.http import HttpResponse
from rest_framework.views import APIView

class TestView(APIView):
  def get(self, request):
    return HttpResponse("这是GET请求的数据")
  def post(self, request):
    return HttpResponse("这是POST请求的数据")
  def put(self, request):
    return HttpResponse("这是PUT请求的数")

第三步 HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <title>test</title>
</head>
<body>
<button id="sign">点击发送跨站请求</button>
<script>
  $('#sign').click(function () {
    $.ajax({
      url: 'http://127.0.0.1:8000/test/', // 要访问的外站
      type: 'put', // 请求类型, put为复杂请求
      contentType: 'application/json', // 指定为'application/json'后，将变为复杂请求
      success: function (data) {
        // 请求成功后将执行该函数
        // data是外站发送过来的数据
        alert(data)
      },
    });
  });
</script>
</body>
</html>

测试效果如下

可见，我们实现了复杂请求的跨域，简单请求就更不用说了.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

PyCharm配置mongo插件的方法
今天小编就为大家分享一篇PyCharm配置mongo插件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-11-11
Python和Sublime整合过程图示
这篇文章主要介绍了Python和Sublime整合过程图示,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
python学习实操案例(五)
这篇文章主要介绍了pyth学习实操案例,主要分享的小练习有我的咖啡馆你做主、显示2019中超联赛中前五名排行、模拟手机通讯录，适合初学者，需要的小伙伴可以参考一下
2022-02-02
matplotlib实现区域颜色填充
这篇文章主要为大家详细介绍了matplotlib实现区域颜色填充，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-03-03
Python创建一个空的dataframe,并循环赋值的方法
今天小编就为大家分享一篇Python创建一个空的dataframe,并循环赋值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-11-11
Python使用正则表达式实现爬虫数据抽取
这篇文章主要介绍了Python使用正则表达式实现爬虫数据抽取，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
python比较两个列表是否相等的方法
这篇文章主要介绍了python比较两个列表是否相等的方法,实例分析了Python中==和is两种方法的区别,需要的朋友可以参考下
2015-07-07
python对excel文档去重及求和的实例
下面小编就为大家分享一篇python对excel文档去重及求和的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-04-04
python是怎么被发明的
在本篇文章里小编给大家分享的是关于python的由来等相关内容，有兴趣的朋友们学习参考下。
2020-06-06
python 6.7 编写printTable()函数表格打印(完整代码)
这篇文章主要介绍了python 6.7 编写一个名为printTable()的函数表格打印，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03