7.Django如何实现跨域

小Pawn爷

已于 2022-09-25 14:54:41 修改

阅读量905

点赞数 1

分类专栏： 9.Rest框架-Django 文章标签： http 前端 https

于 2021-12-05 18:52:32 首次发布

本文链接：https://blog.csdn.net/weixin_44689630/article/details/121733340

版权

9.Rest框架-Django 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

1.同源策略

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源, 即协议不同,域名不同或者端口不同的都是非同源的

浏览器只阻止表单以及 ajax 请求,并不会阻止 src 请求,所以能访问cnd,图片等 src 请求

2.简单/复杂请求

简单请求定义

只能使用get/post/head请求方式
HTTP 头信息不超出以下几种字段Accept, Accept-Language,Content-Language, Last-Event-ID
Content-Type只能是text/plain,multipart/form-data,application/x-www-from-urlencoded
请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器 (未验证),MLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问

注意

任何一个不满足上述要求的请求,即会被认为是复杂请求

3.CORS

CORS(Cross Origin Resource Sharing跨域资源共享)是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求

4.如何解决跨域

方法一:添加响应头Access-Control-Allow-Origin

1.启动http://127.0.0.1:1010/app1

urls.py

from django.urls import path


from app2 import views

urlpatterns = [
    path('app1', views.app1),
]

views.py

from django.http import HttpResponse


def app1(request):
    my_response = HttpResponse("app1")
    return my_response

2.启动http://127.0.0.1:2020/app2

urls.py

from django.urls import path


from app2 import views

urlpatterns = [
    path('app2', views.app2),
]

views.py

from django.shortcuts import render


def app2(request):
    return render(request, 'app2.html')

app2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app2</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<h3>app2</h3>
<button id="btn">发送JSONP请求</button>
<script>
    function func(arg) {
        $('h3').append($('<p>').text(arg))
    }

    $("#btn").click(function () {
        $.ajax({
            url: "http://127.0.0.1:1010/app1/",
            type: "get",
            success: function (arg) {
                $('h3').append($('<p>').text(arg))
            }
        })
    });
</script>
</body>
</html>

3.访问http://127.0.0.1:2020/app2

报错:

cess to XMLHttpRequest at 'http://127.0.0.1:6060/app1/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决

修改http://127.0.0.1:1010/app1中views.py

from django.http import HttpResponse


def app1(request):
    my_response = HttpResponse("app1")
    my_response["Access-Control-Allow-Origin"] = "http://127.0.0.1:2020"
    if request.method == "OPTIONS":
        my_response["Access-Control-Allow-Methods"] = "PUT, DELETE"
        my_response["Access-Control-Allow-Headers"] = "content-type, X-CUSTOMER-HEADER"
        # 设置max age,浏览器端会进行缓存,没有过期之前真对同一个请求只会发送一次预检请求
        my_response["Access-Control-Max-Age"] = 86400
    return my_response

方法二:使用扩展django-cors-headers

安装

pip install django-cors-headers

添加应用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

中间层设置

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

添加白名单

CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:2020',
    'http://127.0.0.1:1010',
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

5.跨域实现流程

1.浏览器必须首先使用[OPTIONS]方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求

2.如果域名在白名单中则在响应结果中告知浏览器允许跨域

3.服务器确认允许之后,才发起实际的 HTTP 请求.在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证

4.浏览器第二次发送post请求,携带用户登录数据到后端,完成登录验证操作

小Pawn爷

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
7.Django如何实现跨域

文章目录1.同源策略2.简单/复杂请求3.CORS4.如何解决实现CORS1.jsonp2.添加响应头1.同源策略同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,即协议不同,域名不同或者端口不同的都是非同源的浏览器只阻止表单以及 ajax 请求,并不会阻止 src 请求,所以能访问cnd,图片等 src 请求2.简单/复杂请求简单请求定义只能使用get/post/head请求方式HTTP 头信息不超出以下几种字段Accept, Accept-
复制链接

扫一扫

专栏目录