跨域问题

一、为什么会有跨域问题？

是因为浏览器的同源策略是对ajax请求进行阻拦了，但是不是所有的请求都给做跨域，像是一般的href属性，a标签什么的都不拦截。

二、解决跨域问题的两种方式

  • JSONP
  • CORS 

三、JSONP

先简单来说一下JSONP，具体详细详见上面JSONP

JSONP是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。（创建一个回调函数，然后在远程服务上调用这个函数并且将json数据形式作为参数传递，完成回调）。

四、CORS跨域

随着技术的发展，现在的浏览器可以主动支持设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

1、简单请求和复杂请求

条件：1、请求方式：HEAD、GET、POST2、请求头信息：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type 对应的值是以下三个中的任意一个application/x-www-form-urlencodedmultipart/form-datatext/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 οnclick="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="获取用户数据" οnclick="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" οnclick="XmlSendRequest();" />
11     </p>
12 
13     <p>
14         <input type="submit" οnclick="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" οnclick="XmlSendRequest();" />
11     </p>
12 
13     <p>
14         <input type="submit" οnclick="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

 

转载于:https://www.cnblogs.com/zhangningyang/p/8471755.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/252323.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PAT A1052

PAT A1052

这个需要注意的是相关的string转整数或者double的函数&#xff1b;详见这个链接blog #include <iostream> #include <string> using namespace std; bool isPrime(int n) {if (n 0 || n 1) return false;for (int i 2; i * i < n; i)if (n % i 0) return fa…
阅读更多...
php审计学习:xdcms2.0.8注入

php审计学习:xdcms2.0.8注入

注入点Fields: 注册页面会引用如下方法: $fields 变量是从 $fields$_POST[fields]; 这里获取&#xff0c; 在代码里没有过滤。 打印 fields 数据查看: 从代码上看 $field_sql.",{$k}{$f_value}"; 最终会变成: ,truename111111,email12345 因为 $field_sql 最终会引入…
阅读更多...
windows下安装python和Python-opencv

windows下安装python和Python-opencv

背景&#xff1a;目前基于python的图像处理和机器视觉的研究还挺多&#xff0c;最近不是在研究目标检测和目标跟踪的算法&#xff0c;由于检测和跟踪的环境比较简单所以从不带学习的跟踪方法&#xff0c;在搜索资料时搜到这个网站&#xff0c;是对opencv中的目标跟踪算法的一个…
阅读更多...
捋一捋js面向对象的继承问题

捋一捋js面向对象的继承问题

说到面向对象这个破玩意&#xff0c;曾经一度我都处于很懵逼的状态&#xff0c;那么面向对象究竟是什么呢&#xff1f;其实说白了&#xff0c;所谓面向对象&#xff0c;就是基于类这个概念&#xff0c;来实现封装、继承和多态的一种编程思想罢了。今天我们就来说一下这其中继承…
阅读更多...
java8简单入门

java8简单入门

1、介绍 本片文章会从一下几个知识点进行介绍&#xff1a; 函数式接口 FunctionalInterfaceLambda 表达式函数引用 Function ReferenceStream看了几篇关于 java8 入门的例子&#xff0c;其中引入了许多令人期待已久的特性&#xff08;虽然我没有过这样的体会&#xff09;&#…
阅读更多...
玩转带外触发的单目相机之一

玩转带外触发的单目相机之一

背景&#xff1a;去年开始研究vins,但是只是用了普通的相机&#xff0c;然后将IMU和相机粘在一起&#xff0c;然后就是联合标定相机和IMU。VINS使用的相机是带有外触发的&#xff0c;还进行了相机和IMU的硬件时间同步。当时我特别想买个带外触发的相机&#xff0c;一直没找到资…
阅读更多...
基于django的视频点播网站开发-step11-后台用户管理功能...

基于django的视频点播网站开发-step11-后台用户管理功能...

用户管理功能&#xff0c;包含用户添加、列表展示、编辑、删除四大功能。下面我们一一揭晓。 用户添加 我们先实现用户添加功能&#xff0c;我们现在urls.py下添加相关的路由 path(user_add/, views.UserAddView.as_view(), nameuser_add), path(user_list/, views.UserListVie…
阅读更多...
分布式之数据库和缓存双写一致性方案解析

分布式之数据库和缓存双写一致性方案解析

先做一个说明&#xff0c;从理论上来说&#xff0c;给缓存设置过期时间&#xff0c;是保证最终一致性的解决方案。这种方案下&#xff0c;我们可以对存入缓存的数据设置过期时间&#xff0c;所有的写操作以数据库为准&#xff0c;对缓存操作只是尽最大努力即可。也就是说如果数…
阅读更多...
‘(‘:illegal token on right side of ‘::‘

‘(‘:illegal token on right side of ‘::‘

背景&#xff1a;想整理升级一下代码&#xff0c;添加了两个类&#xff0c;再一编译代码&#xff0c;出现了好多这样的错误提示“(:illegal token on right side of ::”&#xff0c;我很纳闷这是啥问题&#xff0c;我就使用“注释法”来定位出错的位置&#xff0c;我发现把所有…
阅读更多...
虹软免费人脸识别SDK注册指南

虹软免费人脸识别SDK注册指南

2019独角兽企业重金招聘Python工程师标准>>> 成为开发者三步完成账号的基本注册与认证&#xff1a; STEP1:点击注册虹软AI开放平台右上角注册选项&#xff0c;完成注册流程。 STEP2:首次使用&#xff0c;登录后进入开发者中心&#xff0c;点击账号管理完成企业或者个…
阅读更多...
C++中的类加多线程代码修炼

C++中的类加多线程代码修炼

背景&#xff1a;现在在做一个目标跟踪的项目&#xff0c;需要实时的从工业相机中获取图像&#xff0c;然后再跟踪图像上的目标物&#xff0c;由于起初为了测试跟踪算法&#xff0c;就把“从相机获取图像”和“跟踪处理”都放在了主线程中&#xff0c;在实际测试时&#xff0c;…
阅读更多...
vue的鼠标移入和移出

vue的鼠标移入和移出

vue的鼠标移入和移出 需求&#xff08;鼠标到预约二维码显示&#xff0c;预约添加背景色&#xff09; 实现 <!--html部分--> <ul class"person_list"> //五个li标签皆是循环渲染出来的<li class"item" v-for"(n,index) in 5">…
阅读更多...
聊聊flink的MemoryPool

聊聊flink的MemoryPool

为什么80%的码农都做不了架构师&#xff1f;>>> 序 本文主要研究一下flink的MemoryPool MemoryPool flink-runtime_2.11-1.7.2-sources.jar!/org/apache/flink/runtime/memory/MemoryManager.java abstract static class MemoryPool {abstract int getNumberOfAvai…
阅读更多...
表达式求值

表达式求值

表达式求值问题 ①问题描述 表达式是数据运算的基本形式。人们的书写习惯是中缀式&#xff0c;如&#xff1a;1122*(7-4)/3。中缀式的计算按运算符的优先级及括号优先的原则&#xff0c;相同级别从左到右进行计算。表达式还有后缀式&#xff08;如&#xff1a;22 7 4 - * 3 / 1…
阅读更多...
C++中的类加多线程代码修炼之二

C++中的类加多线程代码修炼之二

背景&#xff1a;在上一篇文章中 写到了我第一次使用C使用多个类多个线程进行编程&#xff0c;由于是第一接手“这么大一个工程”&#xff0c;所以还是要有个参照物的&#xff0c;由于我呢之前好几年一直在看的一个C代码工程就是ORB-SLAM了&#xff0c;这个工程使用C语言&#…
阅读更多...
3-4 第三天 Generator生成器

3-4 第三天 Generator生成器

Generator是ES6里面的新增规范&#xff0c;ES6其实就是ES2015。ES5、ES6、ES7这些术语大家上网一查就都明白了。JavaScript是一个范程&#xff0c;就是我们说的JS。ES就是ECMA Script&#xff0c;是JavaScript标准的书面说法。ES4、5、6、7其实是JS这门语言发展中的不同的版本。…
阅读更多...
神奇的事情--长见识了

神奇的事情--长见识了

背景&#xff1a;我的这个工程里有多个命名空间&#xff0c;之所以是这样是因为&#xff0c;有一个跟踪算法他本身有几个namespace,然后我在他的基础上进行整合代码&#xff0c;将其作为一个功能接口&#xff0c;供其他函数调用&#xff0c;我在整合代码时&#xff0c;将我新加…
阅读更多...
箭头函数的使用用法（一）

箭头函数的使用用法（一）

1 //箭头函数的一个好处是简化回调函数2 //箭头函数没有参数&#xff0c;就使用圆刮号代表参数部分&#xff1b;3 var f () >5;4 console.log(f());5 //两个参数的情况&#xff0c;代码块只有一条语句&#xff0c;可以省略{}6 var f (a,b)> console.log(ab);7 f(1,3);8…
阅读更多...
LinkedList中查询(contains)和删除(remove)源码分析

LinkedList中查询(contains)和删除(remove)源码分析

一、contains源码分析 本文分析双向链表LinkedList的查询操作源码实现。jdk中源程序中&#xff0c;LinkedList的查询操作&#xff0c;通过contains(Object o)函数实现。具体见下面两部分程序&#xff1a;① public boolean contains(Object o) {return indexOf(o) ! -1; } ② p…
阅读更多...
分块入门

分块入门

我貌似和所有的数据结构都有些误会。。。。。。 在处理一些修改查询问题的时候&#xff0c;我们可以利用分治的思想&#xff0c;比如说把一个线性的数据不断分成一棵二叉树&#xff0c;也就是我们所说的线段树&#xff0c;这样我们就可以在logn的时限里做到修改和查询。同理我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023