zoukankan      html  css  js  c++  java
  • Django 【第二十篇】后端CORS解决跨域问题

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

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

     

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

     

    三、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、支持跨域,简单请求

    客户端

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">
        <title>Title</title>
    </head>
    <body>
    <div>
        <h1>欢迎来到我的主页</h1>
        <button onclick="getData()">获取用户数据</button>
    </div>
    <script src="/static/jquery-1.12.4.min.js"></script>
    <script>
        function getData() {
            $.ajax({
                url:'http://127.0.0.1:8080/index/',
                type:"GET",
                success:function (data) {
                    console.log(data)
                }
    
            })
        }
    </script>
    </body>
    </html>
    

      

    服务端

    views.py
    from django.shortcuts import render
    from django.http import JsonResponse
    from rest_framework.views import APIView
    
    # Create your views here.
    class IndexView(APIView):
        def get(self,request,*args,**kwargs):
            ret = {
                'code': 111,
                'data': '你好吗?'
            }
            response = JsonResponse(ret)
            response['Access-Control-Allow-Origin'] = "*"
            return response
    

      

    2、支持跨域,复杂请求

    如果是复杂请求在你真正的发请求之前,会先偷偷的发一个OPTION请求,先预检一下,我

    允许你来你才来

    如果想预检通过就得写个option请求

    user.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">
        <title>Title</title>
    </head>
    <body>
    <input type="button" value="获取用户数据" onclick="getUser()">
    <script src="/static/jquery-1.12.4.min.js"></script>
    <script>
        function getUser() {
            $.ajax({
                url:'http://127.0.0.1:8080/user/',
                type:'POST',
                data:{'k1':'v1'},
                headers:{
                    'h1':'sdfdgfdg'
                },
                success:function (ret) {
                    console.log(ret)
                }
            })
        }
    </script>
    </body>
    </html>
    
    user.html
    

      

    服务端

    from django.shortcuts import render,HttpResponse
    from django.http import JsonResponse
    from rest_framework.views import APIView
    
    class UserIndex(APIView):
        def get(self,request,*args,**kwargs):
            ret = {
                'code': 111,
                'data': '你好吗?'
            }
            response = JsonResponse(ret)
            response['Access-Control-Allow-Origin'] = "*"
            return response
    
        def post(self,request,*args,**kwargs):
            print(request.POST.get('k1'))
            ret = {
                'code':1000,
                'data':'过年啦',
            }
            response = JsonResponse(ret)
            response['Access-Control-Allow-Origin'] = "*"
            return response
    
        def options(self, request, *args, **kwargs):
            # self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
            # self.set_header('Access-Control-Allow-Headers', "k1,k2")
            # self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
            # self.set_header('Access-Control-Max-Age', 10)
    
            response = HttpResponse()
            response['Access-Control-Allow-Origin'] = '*'
            response['Access-Control-Allow-Headers'] = 'h1'
            # response['Access-Control-Allow-Methods'] = 'PUT'
            return response
    

      

    由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。

    • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
    • “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
    • “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age

    3、跨域获取响应头

    默认获取到的所有响应头只有基本信息,如果想要获取自定义的响应头,则需要再服务器端设置Access-Control-Expose-Headers。

    a.html
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
        <p>
            <input type="submit" onclick="XmlSendRequest();" />
        </p>
    
        <p>
            <input type="submit" onclick="JqSendRequest();" />
        </p>
    
        <script type="text/javascript" src="jquery-1.12.4.js"></script>
        <script>
            function XmlSendRequest(){
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4) {
                        var result = xhr.responseText;
                        console.log(result);
                        // 获取响应头
                        console.log(xhr.getAllResponseHeaders());
                    }
                };
                xhr.open('PUT', "http://c2.com:8000/test/", true);
                xhr.setRequestHeader('k1', 'v1');
                xhr.send();
            }
    
            function JqSendRequest(){
                $.ajax({
                    url: "http://c2.com:8000/test/",
                    type: 'PUT',
                    dataType: 'text',
                    headers: {'k1': 'v1'},
                    success: function(data, statusText, xmlHttpRequest){
                        console.log(data);
                        // 获取响应头
                        console.log(xmlHttpRequest.getAllResponseHeaders());
                    }
                })
            }
    
    
        </script>
    </body>
    </html>
    
    HTML
    

      

    views.py
    class MainHandler(tornado.web.RequestHandler):
        
        def put(self):
            self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
    
            self.set_header('xxoo', "seven")
            self.set_header('bili', "daobidao")
    
            self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
    
    
            self.write('{"status": true, "data": "seven"}')
    
        def options(self, *args, **kwargs):
            self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
            self.set_header('Access-Control-Allow-Headers', "k1,k2")
            self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
            self.set_header('Access-Control-Max-Age', 10)
    
    

    4、跨域传输cookie

    在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

    如果想要发送:

    • 浏览器端:XMLHttpRequest的withCredentials为true
    • 服务器端:Access-Control-Allow-Credentials为true
    • 注意:服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *
    b.html
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
        <p>
            <input type="submit" onclick="XmlSendRequest();" />
        </p>
    
        <p>
            <input type="submit" onclick="JqSendRequest();" />
        </p>
    
        <script type="text/javascript" src="jquery-1.12.4.js"></script>
        <script>
            function XmlSendRequest(){
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4) {
                        var result = xhr.responseText;
                        console.log(result);
                    }
                };
    
                xhr.withCredentials = true;
    
                xhr.open('PUT', "http://c2.com:8000/test/", true);
                xhr.setRequestHeader('k1', 'v1');
                xhr.send();
            }
    
            function JqSendRequest(){
                $.ajax({
                    url: "http://c2.com:8000/test/",
                    type: 'PUT',
                    dataType: 'text',
                    headers: {'k1': 'v1'},
                    xhrFields:{withCredentials: true},
                    success: function(data, statusText, xmlHttpRequest){
                        console.log(data);
                    }
                })
            }
    
    
        </script>
    </body>
    </html>
    
    HTML
    

      

    views.py
    class MainHandler(tornado.web.RequestHandler):
        
        def put(self):
            self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
            self.set_header('Access-Control-Allow-Credentials', "true")
            
            self.set_header('xxoo', "seven")
            self.set_header('bili', "daobidao")
            self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
    
            self.set_cookie('kkkkk', 'vvvvv');
    
            self.write('{"status": true, "data": "seven"}')
    
        def options(self, *args, **kwargs):
            self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
            self.set_header('Access-Control-Allow-Headers', "k1,k2")
            self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
            self.set_header('Access-Control-Max-Age', 10)
    

      

     
     
  • 相关阅读:
    递归练习:走台阶
    递归练习:计算最大公约数和最小公倍数
    递归练习:逆序输出一个十进制数的各位数字
    m4, autoconf
    Makefile 和 CMakeLists.txt
    Java中的String pool
    小米路由Mini刷Breed, 潘多拉和LEDE
    Centos 编译LEDE/OpenWrt
    Centos6下编译安装gcc6.4.0
    IntelliJ IDEA遇到Unable to parse template “Class”错误
  • 原文地址:https://www.cnblogs.com/xiaohema/p/8456591.html
Copyright © 2011-2022 走看看