Django【第25篇】：后端CORS解决跨域问题
解决跨域问题
一、为什么会有跨域问题？
是因为浏览器的同源策略是对ajax请求进行阻拦了，但是不是所有的请求都给做跨域，像是一般的href属性，a标签什么的都不拦截。
二、解决跨域问题的两种方式
- JSONP
- CORS
三、JSONP
先简单来说一下JSONP，具体详细详见上面JSONP
JSONP是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。（创建一个回调函数，然后在远程服务上调用这个函数并且将json数据形式作为参数传递，完成回调）。
四、CORS跨域
随着技术的发展，现在的浏览器可以主动支持设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。
1、简单请求和复杂请求
条件：
1、请求方式：HEAD、GET、POST
2、请求头信息：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain 注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求
2、简单请求和复杂请求的区别？
简单请求：一次请求
非简单请求：两次请求，在发送数据之前会先发第一次请求做‘预检’，只有‘预检’通过后才再发送一次请求用于数据传输。
3、关于预检
- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
=> 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
Access-Control-Request-Method
=> 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
Access-Control-Request-Headers
4、CORS的优缺点
- CORS的优点：可以发任意请求
- CORS的缺点：上是复杂请求的时候得先做个预检，再发真实的请求。发了两次请求会有性能上的损耗
五、JSONP和CORS的区别
JSONP：服务端不用修改，需要改前端。发jsonp请求
JSONP：只能发GET请求
CORS：前端的代码不用修改，服务端的代码需要修改。如果是简单请求的话在服务端加上一个响应头。
CORS：可以发任意请求
六、基于CORS实现ajax请求
1、支持跨域，简单请求
客户端
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 </head>
9 <body>
10 <div>
11 <h1>欢迎来到我的主页</h1>
12 <button onclick="getData()">获取用户数据</button>
13 </div>
14 <script src="/static/jquery-1.12.4.min.js"></script>
15 <script>
16 function getData() {
17 $.ajax({
18 url:'http://127.0.0.1:8080/index/',
19 type:"GET",
20 success:function (data) {
21 console.log(data)
22 }
23
24 })
25 }
26 </script>
27 </body>
28 </html>
index.html
服务端
1 from django.shortcuts import render
2 from django.http import JsonResponse
3 from rest_framework.views import APIView
4
5 # Create your views here.
6 class IndexView(APIView):
7 def get(self,request,*args,**kwargs):
8 ret = {
9 'code': 111,
10 'data': '你好吗？'
11 }
12 response = JsonResponse(ret)
13 response['Access-Control-Allow-Origin'] = "*"
14 return response
views.py
2、支持跨域，复杂请求
如果是复杂请求在你真正的发请求之前，会先偷偷的发一个OPTION请求，先预检一下，我
允许你来你才来
如果想预检通过就得写个option请求
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 </head>
9 <body>
10 <input type="button" value="获取用户数据" onclick="getUser()">
11 <script src="/static/jquery-1.12.4.min.js"></script>
12 <script>
13 function getUser() {
14 $.ajax({
15 url:'http://127.0.0.1:8080/user/',
16 type:'POST',
17 data:{'k1':'v1'},
18 headers:{
19 'h1':'sdfdgfdg'
20 },
21 success:function (ret) {
22 console.log(ret)
23 }
24 })
25 }
26 </script>
27 </body>
28 </html>
user.html
1 from django.shortcuts import render,HttpResponse
2 from django.http import JsonResponse
3 from rest_framework.views import APIView
4
5 class UserIndex(APIView):
6 def get(self,request,*args,**kwargs):
7 ret = {
8 'code': 111,
9 'data': '你好吗？'
10 }
11 response = JsonResponse(ret)
12 response['Access-Control-Allow-Origin'] = "*"
13 return response
14
15 def post(self,request,*args,**kwargs):
16 print(request.POST.get('k1'))
17 ret = {
18 'code':1000,
19 'data':'过年啦',
20 }
21 response = JsonResponse(ret)
22 response['Access-Control-Allow-Origin'] = "*"
23 return response
24
25 def options(self, request, *args, **kwargs):
26 # self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
27 # self.set_header('Access-Control-Allow-Headers', "k1,k2")
28 # self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
29 # self.set_header('Access-Control-Max-Age', 10)
30
31 response = HttpResponse()
32 response['Access-Control-Allow-Origin'] = '*'
33 response['Access-Control-Allow-Headers'] = 'h1'
34 # response['Access-Control-Allow-Methods'] = 'PUT'
35 return response
服务端
由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
- “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
- “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
- “预检”缓存时间，服务器设置响应头：Access-Control-Max-Age
3、跨域获取响应头
默认获取到的所有响应头只有基本信息，如果想要获取自定义的响应头，则需要再服务器端设置Access-Control-Expose-Headers。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <p>
10 <input type="submit" onclick="XmlSendRequest();" />
11 </p>
12
13 <p>
14 <input type="submit" onclick="JqSendRequest();" />
15 </p>
16
17 <script type="text/javascript" src="jquery-1.12.4.js"></script>
18 <script>
19 function XmlSendRequest(){
20 var xhr = new XMLHttpRequest();
21 xhr.onreadystatechange = function(){
22 if(xhr.readyState == 4) {
23 var result = xhr.responseText;
24 console.log(result);
25 // 获取响应头
26 console.log(xhr.getAllResponseHeaders());
27 }
28 };
29 xhr.open('PUT', "http://c2.com:8000/test/", true);
30 xhr.setRequestHeader('k1', 'v1');
31 xhr.send();
32 }
33
34 function JqSendRequest(){
35 $.ajax({
36 url: "http://c2.com:8000/test/",
37 type: 'PUT',
38 dataType: 'text',
39 headers: {'k1': 'v1'},
40 success: function(data, statusText, xmlHttpRequest){
41 console.log(data);
42 // 获取响应头
43 console.log(xmlHttpRequest.getAllResponseHeaders());
44 }
45 })
46 }
47
48
49 </script>
50 </body>
51 </html>
52
53 HTML
a.html
1 class MainHandler(tornado.web.RequestHandler):
2
3 def put(self):
4 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
5
6 self.set_header('xxoo', "seven")
7 self.set_header('bili', "daobidao")
8
9 self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
10
11
12 self.write('{"status": true, "data": "seven"}')
13
14 def options(self, *args, **kwargs):
15 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
16 self.set_header('Access-Control-Allow-Headers', "k1,k2")
17 self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
18 self.set_header('Access-Control-Max-Age', 10)
19
20 Tornado
views.py
4、跨域传输cookie
在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。
如果想要发送：
- 浏览器端：XMLHttpRequest的withCredentials为true
- 服务器端：Access-Control-Allow-Credentials为true
- 注意：服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <p>
10 <input type="submit" onclick="XmlSendRequest();" />
11 </p>
12
13 <p>
14 <input type="submit" onclick="JqSendRequest();" />
15 </p>
16
17 <script type="text/javascript" src="jquery-1.12.4.js"></script>
18 <script>
19 function XmlSendRequest(){
20 var xhr = new XMLHttpRequest();
21 xhr.onreadystatechange = function(){
22 if(xhr.readyState == 4) {
23 var result = xhr.responseText;
24 console.log(result);
25 }
26 };
27
28 xhr.withCredentials = true;
29
30 xhr.open('PUT', "http://c2.com:8000/test/", true);
31 xhr.setRequestHeader('k1', 'v1');
32 xhr.send();
33 }
34
35 function JqSendRequest(){
36 $.ajax({
37 url: "http://c2.com:8000/test/",
38 type: 'PUT',
39 dataType: 'text',
40 headers: {'k1': 'v1'},
41 xhrFields:{withCredentials: true},
42 success: function(data, statusText, xmlHttpRequest){
43 console.log(data);
44 }
45 })
46 }
47
48
49 </script>
50 </body>
51 </html>
52
53 HTML
b.html
1 class MainHandler(tornado.web.RequestHandler):
2
3 def put(self):
4 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
5 self.set_header('Access-Control-Allow-Credentials', "true")
6
7 self.set_header('xxoo', "seven")
8 self.set_header('bili', "daobidao")
9 self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
10
11 self.set_cookie('kkkkk', 'vvvvv');
12
13 self.write('{"status": true, "data": "seven"}')
14
15 def options(self, *args, **kwargs):
16 self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
17 self.set_header('Access-Control-Allow-Headers', "k1,k2")
18 self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
19 self.set_header('Access-Control-Max-Age', 10)
views.py
Django【第25篇】：后端CORS解决跨域问题的更多相关文章
- 后端CORS解决跨域问题
一 . 为什么会有跨域问题 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href 属性,a标签什么的都不拦截. 二 . 解决跨域的方法 解决跨域有两种方法 ...
- Django使用jsonp和cors解决跨域请求问题
1.使用jsonp的方式解决跨域请求的问题 我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据 先看项目1的ajax的代码 $(&qu ...
- 配置CORS解决跨域调用—反思思考问题的方式
导读:最近都在用一套完整的Java EE的体系做系统,之前都是用spring框架,现在弄这个Java EE,觉得新鲜又刺激.但,由于之前没有过多的研究和使用,在应用的过程中,也出现了不少的问题.累积了 ...
- 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域
原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...
- Spring Boot中通过CORS解决跨域问题
今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由Netscap ...
- Spring Boot2 系列教程(十四)CORS 解决跨域问题
今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netsca ...
- 14 微服务电商【黑马乐优商城】：day06-使用nginx反向代理并掌握cors解决跨域
本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...
- 使用cors解决跨域遇到浏览器发出options嗅探
前言: 本地开发起的服务器,通过修改hosts文件设置域名映射到本地,接口在测试环境 1. 服务器端设置cors, 配置access-control-allow-origin 头部 使用蚂蚁金服的up ...
- 服务端 CORS 解决跨域
当协议.域名.端口中任一个不同时产生跨域 CORS 跨域资源共享(Cross-origin resource sharing) 参考资料https://developer.mozilla.org/zh ...
随机推荐
- JVM参数设置-jdk8参数设置
JVM参数设置 1.基本参数 参数名称 含义 默认值 -Xms 初始堆大小 内存的1/64 默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时,JVM就会增大堆直到-Xmx ...
- mount -o是什么意思
mount -o是用loop设备, 在 linux挂载本地的(可能是硬盘上的) iso文件时, 使用的. -o 就是loop回环设备的意思. loop回路文件系统: 是: 用来在一个文件系统上实现另一 ...
- windows安装程序制作
作为一个学计算机的,现在才知道那些安装软件都是用软件封装工具封装起来的. 我们写好exe以后可以下载一个Inno setup5 对其打包成可安装的软件,期间可加入图标,readme,等等一些东西.
- 硬件-硬盘-SSD（固态硬盘）：百科
ylbtech-硬件-硬盘-SSD(固态硬盘):百科 固态驱动器(Solid State Disk或Solid State Drive,简称SSD),俗称固态硬盘,固态硬盘是用固态电子存储芯片阵列而制 ...
- Python 笔试集（1）：关于 Python 链式赋值的坑
前言 Python 的链式赋值是一种简易型批量赋值语句,一行代码即可为多个变量同时进行赋值. 例如: x = y = z = 1 链式赋值是一种非常优雅的赋值方式,简单.高效且实用.但同时它也是一个危 ...
- Jmeter之线程组（默认）
Jmeter中的采样器必须要基于线程组. 一.添加线程组 在测试计划上右键,然后选择,如下图: 二.线程组界面 三.线程组界面配置说明 1.名称:线程组自定义名称: 2.注释:添加的一些备注说明信息, ...
- 网易云课堂_C++程序设计入门(下)_第8单元：年年岁岁花相似– 运算符重载_第8单元 - 作业2：OJ编程 - 重载数组下标运算符
第8单元 - 作业2:OJ编程 - 重载数组下标运算符 查看帮助 返回 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提 ...
- ElasticSearch入门 —— 集群搭建
一.环境介绍与安装准备 1.环境说明 2台虚拟机,OS为ubuntu13.04,ip分别为xxx.xxx.xxx.140和xxx.xxx.xxx.145. 2.安装准备 ElasticSearch(简 ...
- Our growth depends not on how many experiences we devour, but on how manywe digest.
rot. v/n. 腐烂 vibration.n. 震动 charcoal. n 木炭 wrinkle. v. 长皱纹 geometry. n. 几何学 walnut.n. 核桃 tailor. n. ...
- [Mac Terminal] ___MAC终端清屏快捷键
清全屏: command + K 清上一行命令:command + L