【Django】实现跨域请求

JsonP实现跨域
在Django中间件中添加响应头

CORS 即 Cross Origin Resource Sharing 跨域资源共享.

跨域请求分两种：简单请求、复杂请求.

简单请求

简单请求必须满足下述条件.

HTTP方法为这三种方法之一：HEAD、GET、POST

·

HTTP头消息不超出以下字段：

Accept、Accept-Language、Content-Language、Last-Event-ID

·

且Content-Type只能为下列类型中的某一个：

application/x-www-from-urlencoded、

multipart/form-data、

text/plain.

·

任何不满足上述要求的请求，都会被认为是复杂请求.

复杂请求会先发出一个预请求——预检，OPTIONS请求.

浏览器的同源策略

·

无法跨域就是被浏览器的同源策略限制的.

也就是说，浏览器会阻止非同源的请求.

·

那什么是非同源呢？域名或端口不同的，都属于非同源.

·

浏览器只会阻止表单以及Ajax请求的跨域，但不会阻止src请求跨域.

所以，我们的cdn、图片等src请求都是正常的.

JsonP实现跨域

JsonP跨域的原理是利用了浏览器不阻止src请求跨域来实现的.

JsonP只能实现GET请求跨域.

首先准备我们的视图文件

from django.http import HttpResponse

from rest_framework.views import APIView

class TestView(APIView):

    def get(self, request):

        return HttpResponse("handlerResponse('is ok')")

        # 注意返回的函数以及参数的格式

然后 HTML文件

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <title>JsonP跨站请求测试</title>

</head>

<body>

<script>

    // 函数名应为handlerResponse，这是一种约定俗成

    function handlerResponse(data) {

        alert(data)

    }

</script>

<!--必须放在被执行函数的script标签的下面，否则会报错函数不存在-->

<script src="http://127.0.0.1:8000/test/"></script>

</body>

</html>

好了我们来测试吧

可以看到，我们成功实现了跨域获取数据.

JsonP解决跨域只能发送GET请求，并且实现起来前后端交互会比较多，现在几乎已经不在使用了.

在Django中间件中添加响应头

可实现简单请求和复杂请求的跨域

第一步准备中间件

from django.utils.deprecation import MiddlewareMixin

class MyCors(MiddlewareMixin):

    def process_response(self, request, response):

        # 如下，等于'*'后，便可允许所有简单请求的跨域访问

        response['Access-Control-Allow-Origin'] = '*'

        # 判断是否为复杂请求

        if request.method == 'OPTIONS':

            response['Access-Control-Allow-Headers'] = 'Content-Type'

            response['Access-Control-Allow-Methods'] = 'PUT,PATCH,DELETE'

        return response

写好之后，别忘记了去注册.

第二步视图文件

from django.http import HttpResponse

from rest_framework.views import APIView

class TestView(APIView):

    def get(self, request):

        return HttpResponse("这是GET请求的数据")

    def post(self, request):

        return HttpResponse("这是POST请求的数据")

    def put(self, request):

        return HttpResponse("这是PUT请求的数")

第三步 HTML文件

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <title>test</title>

</head>

<body>

<button id="sign">点击发送跨站请求</button>

<script>

    $('#sign').click(function () {

        $.ajax({

            url: 'http://127.0.0.1:8000/test/',  // 要访问的外站

            type: 'put',  // 请求类型, put为复杂请求

            contentType: 'application/json',  // 指定为'application/json'后，将变为复杂请求

            success: function (data) {

                // 请求成功后将执行该函数

                // data是外站发送过来的数据

                alert(data)

            },

        });

    });

</script>

</body>

</html>

测试效果如下

可见，我们实现了复杂请求的跨域，简单请求就更不用说了.

好了，就到这里吧.

巴特西

【Django】实现跨域请求

JsonP实现跨域

在Django中间件中添加响应头

最新文章

热门文章