Django实现跨域请求过程详解
作者:Title 发布时间:2022-08-31 23:45:56
前言
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>
测试效果如下
可见,我们实现了复杂请求的跨域,简单请求就更不用说了.
来源:https://www.cnblogs.com/zyk01/p/10176353.html
猜你喜欢
- 实例如下所示:#!/usr/bin/python# -*- coding: UTF-8 -*-import reimport urllib,
- 目录问题注意总结问题如何在一张表上对多个表进行外键关联from django.db import modelsclass Appliance
- 概要本文只是简单的介绍动态规划递归、非递归算法实现案例一题目一:求数组非相邻最大和[题目描述]在一个数组arr中,找出一组不相邻的数字,使得
- 不管是一名学生,亦或是一名员工,我们都需要时刻注意学校或公司网站的通知,尽量做到即时获取最新消息。大部分博客或数据资源网站都会有自己的RSS
- 我们将学习如何通过一种称为修复的方法去除旧照片中的小噪音,笔画等。基本思路很简单:用相邻像素替换那些坏标记,使其看起来像邻域。cv2.inp
- 合并numpy中numpy中可以通过concatenate,指定参数axis=0 或者 axis=1,在纵轴和横轴上合并两个数组。impor
- 这篇文章主要介绍了python几种常用功能实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 这篇文章主要介绍了python列表生成器迭代器实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 昨天去面试,百度题果然不一样,笔试我就蒙了,现在能记住两道题,笔试:1、title和alt 区别2、三列布局 左边裂固定宽度左对齐,右边列固
- PHP版: $o = array('x'=>1, 'y'=>2, 'z'=>
- 我是使用源码编译的方式安装的,网上有的可以添加 ppa 源进行在线安装,但我试了行不通,所以还是采用源码安装1、安装编译依赖项sudo ap
- 内容适应形式学习了死猫的文章,我今天也来说说有关内容和容器的关系。看标题你也许觉得有些囧,它和上一篇《形式追随内容?》看起来相反,而且好像从
- 首先打击我的就是rpm安装,它告诉我发现了Mysql版本冲突,安装无法继续。我用rpm -q 查询后,想通过rpm -e 来删除系统自带的版
- 我们怎样才能了解用户需求呢?大家都知道可用性测试、调查问卷之类与用户进行沟通的途径,这些方法各有各的利弊,如果逐一分析的话,恐怕至少要分成三
- 在默认情况下,Access 2000/2002数据库是以“共享”的方式打开的,这样可以保证多人能够同时使用同一个数据库。不过,在共享方式打开
- 程序代码: '关键字的搜索 str="select * from tableNam
- 1.函数array() 功能:创建一个数组变量 格式:array(list) 参数:list为数组变量中的每个数值列,中间用逗号间隔 例子:
- 本文实例为大家了Python中列表(List)的详解操作方法,供大家参考,具体内容如下1.创建列表。只要把逗号分隔的不同的数据项使用方括号括
- 引言近期网上这位卖蜂蜜的小伙鬼畜挺火的,大家质疑背景造假,这里我就带着大家实现“背景造假”(PS:原
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window