Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 780|回复: 0

django基于cors解决跨域请求问题详解

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-4-19 18:15:43 | 显示全部楼层 |阅读模式

    一、同源策略

      同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现

      请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

      比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据

      浏览器上就会报错,这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

      已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:8001/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

      但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截

    二、CORS(跨域资源共享)简介

      CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

      整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

      因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信

    三、CORS基本流程

      浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

      浏览器发出CORS简单请求,只需要在头信息之中增加一个Origin字段。

      浏览器发出CORS非简单请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

    四、CORS两种请求详解

      只要同时满足以下两大条件,就属于简单请求。

    (1)请求方法是以下三种方法之一:

      • HEAD
      • GET
      • POST

    (2)HTTP的头信息不超出以下几种字段:

      • Accept
      • Accept-Language
      • Content-Language
      • Last-Event-ID
      • Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

    凡是不同时满足上面两个条件,就属于非简单请求。

    浏览器对这两种请求的处理,是不一样的。

    * 简单请求和非简单请求的区别?
    
     简单请求:一次请求
     非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。
    * 关于“预检”
    
    - 请求方式:OPTIONS
    - “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息
    - 如何“预检”
      => 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过
      Access-Control-Request-Method
      => 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过
      Access-Control-Request-Headers

      4.1 支持跨域,简单请求:

      服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'

      4.2 支持跨域,复杂请求:

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

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

    五、Django项目中支持CORS

      在返回的结果中加入允许信息(简单请求)

    def test(request):
    import json
    obj = HttpResponse(json.dumps({'name': 'lqz'}))
    # obj['Access-Control-Allow-Origin']='*'
    obj['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8004'
    return obj

      放到中间件处理复杂和简单请求:

    from django.utils.deprecation import MiddlewareMixin
    
    
    class CorsMiddleWare(MiddlewareMixin):
        def process_response(self, request, response):
            if request.method == "OPTIONS":
                # 可以加*
                response["Access-Control-Allow-Headers"] = "Content-Type"
                response["Access-Control-Allow-Origin"] = "http://localhost:8080"
            return response

    六、利用django-cors-headers模块处理

      1.安装cors模块

    pip install django-cors-headers

      2.修改setting.py中配置

    INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'corsheaders',
    ]
    
    MIDDLEWARE_CLASSES = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]

      3.添加允许访问的白名单,凡是出现在白名单的域名都可以访问后端接口

    CORS_ORIGIN_WHITELIST = (
     '127.0.0.1:8080',
     'localhost:8080',
    )
    CORS_ALLOW_CREDENTIALS
    = True # 指明在跨域访问中,后端是否支持对cookie的操作。 CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', 'Pragma', )

    七、通过jsonp处理跨域(基于原生js)

      注意:jsonp只能模拟get请求处理跨域

      1、jsonp介绍

      jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。下面介绍一个jsonp基本实现原理,即利用script特性实现跨域请求,如下实例:

      2、基于JS的JSONP的实现

      一般情况下,我们希望这个script标签能够动态的调用,我们可以通过页面的触发事件操作后,通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务。实例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>无配齐</h1>
        <input type="button" value="按钮2" onclick="sendMsg2();" />
    
    
        <script>
            function sendMsg2() {
                var tag = document.createElement('script');
                tag.src = 'http://127.0.0.1:8001/api/?callback=x1';
                document.head.appendChild(tag);
    
                document.head.removeChild(tag);
            }
    
    // 动态回调函数
    function x1(arg) { console.log(arg); } </script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script></script> </body> </html>

      为了更加灵活,上述我们将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调。

    from django.shortcuts import render, HttpResponse
    
    def api(request):
        # 获取查询字符串中的callback参数
        func_name = request.GET.get('callback')
        return HttpResponse('%s("baidu.com")' % func_name)

    八、通过jsonp处理跨域(基于jQuery中的getJSON方法)

      基于jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法。与js实现的方式相比,我们并不要自己生成一个script标签,客户端也并不需要自己定义一个回调函数,要注意的是在$.getJSON(url,[data],[callback])方法的url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名。

    //项目中html中部分代码
    <script>
        $(".ajax_btn").click(function () {
            $.getJSON("http://127.0.0.1:8002/send_ajax/?callback=?",function (data) {
                alert(data);
                console.log(data)
            })
    
        });
    </script>
    //项目中的视图函数,即跨域请求的路径 def send_ajax(request):   import json   func_name=request.GET.get("callback") #获得回调函数的名字   dic={"k1":"v1"} print("ok")   return HttpResponse("%s('%s')" %(func_name,json.dumps(dic)))

    八、通过jsonp处理跨域(基于jQuery中的ajax方法)

      上述这种方法,很方便,不需要我们自己定义回调函数和指定回调函数名,但是,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现。如下例:

    //项目中html中部分代码
    <script>
        $(".ajax_btn").click(function () {
           $.ajax({
               url:"http://127.0.0.1:8002/send_ajax/",
               dataType:"jsonp",                 //相当于script标签
               jsonp:'callbacks',                //相当于路径中回调函数路径参数键值对的键
               jsonpCallback:"func"              //相当于路径中回调函数路径参数键值对的值,回调函数名
    
           })
    
        });
        //定义回调函数
        function func(arg) {
            alert(arg);
            console.log(arg)
    
        }
    </script>
    
    //项目中的视图函数,即跨域请求的路径 def send_ajax(request): import json func_name=request.GET.get("callbacks") #获得回调函数的名字 dic={"k1":"v1"} print("ok") return HttpResponse("%s('%s')" %(func_name,json.dumps(dic)))

     

    其他方法详见如下:

    摘录文章地址:https://www.zhangshengrong.com/p/9MNloW5naJ/

     jsonp摘录文章地址:https://www.cnblogs.com/seven-007/p/8206519.html

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-12-22 17:23 , Processed in 0.059141 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表