Django 第二十篇后端CORS解决跨域问题

Posted 呆萌小河马的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)

  

 

 

 
 

 

以上是关于Django 第二十篇后端CORS解决跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离Django解决跨域的问题

Python全栈开发之路 第二十篇:Django框架

django 前后端分离开发解决跨域问题

django 前后端分离开发解决跨域问题

小刘同学的第二十篇博文

Vue+Django 跨域问题配置