django跨域解决

最新推荐文章于 2024-03-08 13:55:30 发布

捣蛋孩学编程

最新推荐文章于 2024-03-08 13:55:30 发布

阅读量290

点赞数

文章标签： django python restful

本文链接：https://blog.csdn.net/m0_62520968/article/details/124376513

版权

使用djangorestframework-simplejwt权限认证产生access

跨域问题解决
    前端用jsonp
    后端：
        1.安装pip install django-cors-headers
        2.在settings添加应用'corsheaders',
            在中间件添加位置
                'django.middleware.security.SecurityMiddleware',
                'django.contrib.sessions.middleware.SessionMiddleware',
                # 增加跨域请求的中间件，必需在这两个后面，在CommonMiddleware前面
                'corsheaders.middleware.CorsMiddleware',
                'django.middleware.common.CommonMiddleware',
            添加白名单
                CORS_ORIGIN_WHITELIST = [
                        # 只有localhost:8000才可以跨域访问
                        'https://localhost:8080',
                        'https://127.0.0.1:8080',
                        # 所有域名都可以跨域访问可以这样设置
                        'https://*',
                        ]
                #所有域名都可以跨域访问，也可以这样设置
                # CORS_ORIGIN_ALLOW_ALL = True
                # CORS_ALLOW_CREDENTIALS = True

在登录时获得access并保存在localStorage.token

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
</head>
<body>
<form>
    <p><input type="text" name="username" id="username" placeholder="用户名"></p>
    <p><input type="password" name="password" id="password" placeholder="密码"></p>
    <p><input type="button" value="登录" id="btn"></p>
</form>



</body>
<script>
    $('#btn').click(function() {
        var username = $('#username').val();
        var password = $('#password').val();

        $.post('http://127.0.0.1:8000/api/auth/token/obtain/',
            {username: username, password: password},
            function(data) {
                if (data) {
                    // 拿到access存入localStorage.token，show_movie.html请求时放到请求头中
                    localStorage.token = data.access;
                    // 请求列表
                    location.href='show_movie.html'
                }
        })
    })

</script>
</html>

ajax请求时将localStorage.token加入请求头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影列表</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>

</head>
<body>
<h2>电影列表</h2>
<div id="box">

</div>
<a id="previous" href="javascript:;">上一页</a>
<a id="next" href="javascript:;">下一页</a>
</body>
<script>
    $(function () {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8000/api/movielist",
            // 将获取的localStorage.token添加到请求头
            headers: {'Authorization': 'Bearer ' + localStorage.token},
            success: function (data) {
                // 获取返回数据内容
                var movies = data.results;
                // 动态添加数据
                for (var i = 0; i < movies.length; i++) {
                    $('#box').append('<p>' + movies[i].showname + '</p>')
                }
                // 上一页下一页设置
                localStorage.previous = data.previous
                localStorage.next = data.next
            }
        })
    })
    $('#previous').click(function () {
        if (localStorage.previous === 'null') {
            alert('已是第一页！')
            return
        }
        else {
            $.ajax({
            type: 'GET',
            url: localStorage.previous,
            headers: {'Authorization': 'Bearer ' + localStorage.token},
            success: function (data) {
                // 获取返回数据内容
                var movies = data.results;
                $('#box').empty()
                // 动态添加数据
                for (var i = 0; i < movies.length; i++) {
                    $('#box').append('<p>' + movies[i].showname + '</p>')
                }
                // 上一页下一页设置
                localStorage.previous = data.previous
                localStorage.next = data.next
            }
        })
        }

    })
    $('#next').click(function () {
        if (localStorage.next === 'null'){
            alert('已是最后一页！')
            return
        }
        else {
            $.ajax({
            type: 'GET',
            url: localStorage.next,
            headers: {'Authorization': 'Bearer ' + localStorage.token},
            success: function (data) {
                // 获取返回数据内容
                var movies = data.results;
                $('#box').empty()
                // 动态添加数据
                for (var i = 0; i < movies.length; i++) {
                    $('#box').append('<p>' + movies[i].showname + '</p>')
                }
                // 上一页下一页设置
                localStorage.previous = data.previous
                localStorage.next = data.next
            }
        })
        }

    })

</script>
</html>

捣蛋孩学编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
django跨域解决

使用djangorestframework-simplejwt权限认证产生access跨域问题解决前端用jsonp 后端： 1.安装pip install django-cors-headers 2.在settings添加应用'corsheaders', 在中间件添加位置 'django.middleware.security.SecurityMiddleware', .
复制链接

扫一扫