• 跨域之解决方法

    目录：

    一 什么是跨域

    1.  跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

    2. 同源：所谓同源是指，域名，协议，端口均相同

    # 跨域的同源策略：

   - 对ajax请求进行阻拦

   - 对href属性都不阻拦　

    二 解决跨域方案

    方式一：JSONP 

    JSONP是json用来跨域的一个应用方法，原理是通过script标签的跨域特性来绕过同源策略。

    点击按钮：
	动态添加一个
		<script src='http://www.baidu.com/users/'></script>
		<script>
			function func(arg){
				alert(arg)
			}
		</script>
	删除 
		<script src='http://www.baidu.com/users/'></script>

ps：必问的一个点

    示例：

     1 客户端浏览器：
 2     - jsonp(pythonav)
 3 
 4 Pythondv网站-政府：
 5     - jsonp(pythonav)
 6 
 7 Pythonav网站：
 8     - {
 9             'code':1111,
10             'list':[
11                 ...
12                 ...
13                 ...
14             ]
15             
16         }
    View Code

    详情：戳一下

    方式二：  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 关于预检

    - 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

    3 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
  • 相关阅读:
    SqlServer：此数据库处于单用户模式，导致数据库无法删除的处理
    syscolumns表中所有字段的意思
    SQL数据库之变量
    Sqlserver常用的时间函数---GETDATE、GETUTCDATE、DATENAME
    判断游标是否存在的同时检测游标状态
    向已写好的多行插入sql语句中添加字段和值
    truncate和delete之间有什么区别
    javascript实现单例模式
    关于javascript中的 执行上下文和对象变量
    了解javascript中的this --实例篇
  • 原文地址：https://www.cnblogs.com/lianxuebin/p/8435698.html
Copyright © 2020-2023  润新知