Django实现跨域请求 񨉤

Posted gqy02

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django实现跨域请求 񨉤相关的知识,希望对你有一定的参考价值。

原文: http://blog.gqylpy.com/gqy/295

"@
***

补充:

from django.utils.safestring import mark_safe  # 安全的字符串
def test(request):
   return HttpResponse(mark_safe(<div>xx</div>))

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

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

简单请求

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

HTTP方法为这三种方法之一:HEADGETPOST
·
HTTP头消息不超出以下字段:
AcceptAccept-LanguageContent-LanguageLast-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-Methods'] = '*'
            response['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'

        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>

测试效果如下
技术图片
可见,我们实现了复杂请求的跨域,简单请求就更不用说了.

好了,就到这里吧.

"

原文: http://blog.gqylpy.com/gqy/295

以上是关于Django实现跨域请求 񨉤的主要内容,如果未能解决你的问题,请参考以下文章

该请求被重定向到“https://..com/site/login?”,这对于需要预检的跨域请求是不允许的

解决携带身份信息的跨域请求

$http跨域请求怎么解决

WebAPI Ajax 跨域请求解决方法(CORS实现)

WebAPI Ajax 跨域请求解决方法(CORS实现)

web跨域问题(java) 跨域请求